Day26 - 轻前端 Component - jQuery UI Selectmenu

这个范例把上个范例的 jQuery UI Selectmenu 放到 vue component 内

就可以做到关注点分离 !

Case01

把订单项目下拉选单放在这个 component 内 !

因为 component 可视为与 Domain 无关，就可以做为共用元件，因此变数命名上，就不需要有 Domain 意图的名称了 !

const jquery_ui_select_menu = {
    template: `
      <select v-bind:id="id"
              v-model="modelValue">
          <option value="null">请选择</option>
          <option v-for="(item, item_index) in options"
                  v-bind:key="item.Value"
                  v-bind:value="item.Value">
              {{ item.Text }}
          </option>
      </select>
    `,
    props: {
        id: String,
        options: Array,
        modelValue: String,
        width: Number,
    },
    setup(props, {emit}) {

        let dom = null;

        onMounted(() => {
            dom = $("#"+ props.id);
            dom.selectmenu({
                width: props.width,
                change: function (event, ui) {
                    emit('update:modelValue', parseInt(ui.item.value));
                }
            });
        })

        return {
        }
    },
}

View

引用上述 component

原本 vue 指定 mount 的地方上面加上 js script 的引用

</script>
<script src="/lib/jquery-ui-select-menu.js?20210608001"></script>
<script>
  app.component("jquery-ui-select-menu", jquery_ui_select_menu);

  const vm = app.mount('#app');
</script>

订单项目下拉选单就改为使用上述的 component
- v-model - 直接绑定指定的 Property，因此不需要上个范例的 item-index 相关的语法了 !
- id - 主要是用於 jQuery UI Selectmenu 初始化要用，避免给定相同的 id
- options - 下拉选单项目。项目的 Text 为显示文字、Value 为项目的值 !
- width - 指定下拉选单的宽度
```
  <td>
    <jquery-ui-select-menu
        v-model="item.OrderItemId"
        v-bind:id="'select-menu-'+index"
        v-bind:options="order_items"
        v-bind:width=200
    ></jquery-ui-select-menu>
</td>
```