iboss_wx_app/components/dkbase/dk-title/dk-title.js

/*******************************************************************************
 * Copyright(c) 2022 dongke All rights reserved. / Confidential
 * 类的信息：
 *		1.程序名称：带tag标题文本显示组件，解决因为tag现在造成文本换行的问题
 *		2.功能描述：dkTitle组件
 * 编辑履历：
 *		作者				日期					版本				修改内容
 *		admin		  	2021-7-11  		1.00		   	  新建
 *******************************************************************************/
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    /**
     * 标题内容
     */
    title:{
      type: String,
      value: ' ',
    },
    /**
     * 标题标签内容
     */
    titleTag:{
      type: String,
      value: '',
    },
    /**
     * 字体大小（默认10px）
     */
    fontSize:{
      type:Number,
      value:10
    },
    /**
     * title字体大小（默认13px）
     */
    titleFontSize:{
      type:String,
      value:'13px'
    },
    /**
     * 缩进的宽度
     */
    indentWidth:{
      type:String,
      value:''
    }
  },
  
  options: {   
    styleIsolation: 'shared',
  },

  /**
   * 组件的初始数据
   */
  data: {
    indent:0,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 查询标题宽度
     */
    initWidth(){
      // 没有做设置才会执行
      let self = this
      var query = wx.createSelectorQuery().in(this);
      query.select('.vanTag').boundingClientRect()
        query.exec(function (res) {
            //res就是 所有标签为publicImg的元素的信息 的数组
            if(res && res.length > 0 && res[0]){
              self.setData({
                indent:res[0].width * 2 + 10
              })
            }
        })
    },
  },
  /**
  * 组件生命周期
  */
  lifetimes: {
    attached: function () {
      // 页面被展示
      this.initWidth();
    },
  },
})