vue项目增删改按钮控制公共组件封装

 组件封装公共按钮控制

<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']
}
}

}

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