xiaoshi-wx/myComponents/myInput/myInput.js

// myComponents/myInput/myInput.js

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
    * 组件的属性列表
    */
  properties: {
    value:{
      type:String,
      value:''
    },
    placeholder:{
      type:String,
      value:'请输入'
    },
    showEdit:{
      type:Boolean,
      value:true
    }
  },
  // 监听传入的变量,当传入的值发生变化时,触发方法
  observers: {
    'value': function (val) {
      // console.log(val);
    }
  },
  /**
   * 页面的初始数据
   */
  data: {
    content:'',
    show:false,
    fileList:[]
  },
methods:{
  changeInput(e){
    const value = e.detail.value;
    this.triggerEvent("input", value);
  },
  inputBlur(e){
    const value = e.detail.value;
    if(value == this.data.content){
      return false
    }
    this.changeContent(value)
    this.triggerEvent("change", value);
  },
  changeContent(value){
    this.setData(
      {
        content:value
      }
    )
  },
  clickInnerIcon(e){
    if(this.properties.showEdit){
      // this.data.show = !this.data.show
      this.setData(
        {
          show:!this.data.show
        }
      )
    }
    console.log(this.properties.showEdit,this.data.show)
    this.triggerEvent('clickInnerIcon',1)
  },
  buttonClick(e){
    // console.log(e,this.properties.value)
    this.triggerEvent('search',1)
  },
  //图片上传
  beforeUpload(e){
    console.log(e.detail)
    if(e.detail.errMsg=="chooseMedia:ok"){
      var data = [{
        status: 'done',
        url: e.detail.tempFiles[0].tempFilePath,
      }]
  
      this.setData({ fileList:data })
    }
  },
  onChange(e) {
    console.log('1', e)
    const { file, fileList } = e.detail
    if (file.status === 'uploading') {
      this.setData({
        progress: 0,
      })
      wx.showLoading()
    } else if (file.status === 'done') {
      this.setData({
        imageUrl: file.url,
      })
    }

    // Controlled state should set fileList
    this.setData({ fileList })
  },
  //预览
  onPreview(e) {
    console.log('onPreview', e)
    const { file, fileList } = e.detail
    wx.previewImage({
      current: file.url,
      urls: fileList.map((n) => n.url),
    })
  },
},
  /**  
   * 组件的生命周期函数列表  
   */  
  lifetimes: {  
    // 在组件实例进入页面节点树时执行  
    attached: function () {  
      // 初始化操作  
      // console.log('组件初始化');  
      this.changeContent(this.properties.value)
      // ...  
    },  
    // 在组件实例被移除出页面节点树时执行  
    detached: function () {  
      // 清理工作  
      console.log('组件销毁');  
      // ...  
    },  
    // ...  
  },  
  
  /**  
   * 组件所在页面的生命周期函数可以在 pageLifetimes 中定义  
   *  
   * 页面生命周期函数：  
   * show：页面显示  
   * hide：页面隐藏  
   * resize：页面尺寸变化  
   */  
  pageLifetimes: {  
    // ...  
  }  


})