标签：封装 tohandleEdit showBtns tohandleAdd default 按钮 增删 emit

 组件封装公共按钮控制

<view>
<slot name="right">
	<view class="x-end" style="margin-right: 100rpx;">
	<button class="btn" v-if="showBtns.indexOf('add')!=-1" @click="tohandleAdd">
		<uni-icons type="plus" size="24" color="#2D8CF0"></uni-icons>
	</button>
    <button class="btn" v-if="showBtns.indexOf('edit')!=-1" @click="tohandleEdit">
	<uni-icons type="compose" size="24" color="#FF9900"></uni-icons></button>
	 <button class="btn" v-if="showBtns.indexOf('save')!=-1" @click="handleSave">
	<uni-icons type="checkmarkempty" size="24" color="#2D8CF0"></uni-icons>			  
						</button>
	<button class="btn" v-if="showBtns.indexOf('stop')!=-1" @click="handleOss">
	<uni-icons type="minus-filled" size="24" color="#ED4014"></uni-icons>
						</button>
	<button class="btn" v-if="showBtns.indexOf('cancel')!=-1" @click="tohandleCancel">
		<uni-icons type="undo-filled" size="24" color="#2DB7F5"></uni-icons>
			</button>
		</view>
	</slot>
</view>

export default {
		data() {
        return{}
      },
       props: {
        showBtns:{
		 type: Array,
		 default:[],		
		},
      }，
     methods:{
     tohandleAdd(){//add按钮控制
				this.$emit('tohandleAdd');
			},
			tohandleEdit(){
				this.$emit('tohandleEdit');
			},
			tohandleCancel(){
				this.$emit('tohandleCancel');
			},
			handleSave(){//保存(页面区分编辑和新增得保存)
				this.$emit('handleSave');
			},

			handleOss(){
				this.$emit('handleOss');
			},


  }
   }

父组件使用:

<cu-custom title="商品档案" backText='返回' :isBack="true" :isbackIcon='false' :showBtns="showBtns" @tohandleAdd='tohandleAdd' @tohandleCancel='tohandleCancel' @tohandleEdit='tohandleEdit' @handleSave='handleSave' @handleOss='handleOss'>
 </cu-custom>

export default {
		data() {
			return {
           showBtns:['add]
          }
     }

methods:{
tohandleAdd(){
    this.showBtns=['save','cancel']
}

tohandleEdit(){
    this.showBtns=['save','cancel']
}
}

}

这种方式控制按钮逻辑清晰，方法方便

标签：封装,tohandleEdit,showBtns,tohandleAdd,default,按钮,增删,emit
来源： https://blog.csdn.net/baidu_41899377/article/details/121398967

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。