vue新建按钮弹出选框

在Vue中，实现点击一个按钮后弹出一个选框（比如一个对话框、下拉菜单或者其他自定义的弹出层）通常可以通过结合Vue的响应式数据和条件渲染来实现。这里，我将给出一个使用Vue和Element UI（一个流行的Vue UI库）的示例，来展示如何点击一个按钮后弹出一个对话框。如果你不使用Element UI，也可以按照类似的逻辑使用其他UI库（如Vuetify、Quasar等）或纯CSS/JavaScript来实现。

<el-button type="primary" @click="openBatchView" >新增批量</el-button>

<el-dialog v-model="dialogVisible" title="新增批量" >
    <div>
       <cl-filter label="产品key" >
          <cl-select :options="dict.get('dspProductName')" prop="productName" style="width: 880px" />
       </cl-filter>
    </div>
    <batch/>
    <template #footer>
       <el-button type="primary" @click="dialogVisible = false">取消</el-button>
       <el-button type="success">保存</el-button>
    </template>
</el-dialog>


<script lang="tsx" name="dsp-material" setup>
const dialogVisible = ref<boolean>(false)
const openBatchView = () =>{
	dialogVisible.value = true
}
</script>