lj-dialog-sel.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <!--
  2. 弹窗显示组件
  3. title:弹窗标题
  4. options: 显示数组
  5. showLable: 显示值
  6. -->
  7. <template>
  8. <mu-dialog :open.sync="dialogOpen" :title="title" scrollable>
  9. <div class="lj-card-item" v-for="item in options">
  10. <mu-row>
  11. <mu-col span="12" class="lj-card-secondary-title" style="text-align: center"
  12. @click="handleSelItem(item)">{{item[showLabel]}}
  13. </mu-col>
  14. </mu-row>
  15. </div>
  16. </mu-dialog>
  17. </template>
  18. <script>
  19. export default {
  20. name: "lj-dialog-sel",
  21. components: {},
  22. props: {
  23. // 标签文本
  24. title: {
  25. type: String,
  26. default: "弹窗"
  27. },
  28. // 选项数据数组
  29. options: {
  30. type: Array
  31. },
  32. showLabel: {
  33. type: String,
  34. default: ""
  35. },
  36. },
  37. data() {
  38. return{
  39. dialogOpen: false,
  40. }
  41. },
  42. created() {
  43. },
  44. mounted() {
  45. },
  46. methods:{
  47. open() {
  48. this.dialogOpen = true;
  49. },
  50. close() {
  51. this.dialogOpen = false;
  52. },
  53. handleSelItem(item){
  54. this.$emit('select-item', {item: item});
  55. this.close();
  56. }
  57. },
  58. computed: {
  59. },
  60. watch: {
  61. }
  62. }
  63. </script>