Q分配器输出值

Question

我有个奇效分离器：

<div class="filter-container">
        <q-splitter v-model="splitterModel">
          <template v-slot:before>
            <div>
              <q-splitter v-model="splitterModel2">
                <template v-slot:before>
                    <Buttons/>
                </template>

                <template v-slot:after>
                    <Buttons/>
                </template>
              </q-splitter>
            </div>
          </template>

          <template v-slot:after>
            <div>
              <q-splitter v-model="splitterModel3">
                <template v-slot:before>
                    <Buttons/>
                </template>
                <template v-slot:after>
                    <Buttons/>
                </template>
              </q-splitter>
            </div>
          </template>
        </q-splitter>
      </div>

setup() {
   const splitterModel = ref(50);
   const splitterModel2 = ref(50);
   const splitterModel3 = ref(50);
    ...
return {
splitterModel,
splitterModel2,
splitterModel3,
...

是否有任何方法可以在鼠标拖动或更改splitterModel值时保存splitterModel值？我想在以后的应用程序中使用这些值。

Answer 1

选项1

这可以通过使用拆分器事件@update:在docs 这里中看到的模型值来实现。

示例

<div class="filter-container">
        <q-splitter v-model="splitterModel" @update:model-value="handleUpdate">
          <template v-slot:before>
            <div>
              <q-splitter v-model="splitterModel2">
                <template v-slot:before>
                    <Buttons/>
                </template>

                <template v-slot:after>
                    <Buttons/>
                </template>
              </q-splitter>
            </div>
          </template>

          <template v-slot:after>
            <div>
              <q-splitter v-model="splitterModel3">
                <template v-slot:before>
                    <Buttons/>
                </template>
                <template v-slot:after>
                    <Buttons/>
                </template>
              </q-splitter>
            </div>
          </template>
        </q-splitter>
      </div>

setup() {
   const splitterModel = ref(50);
   const splitterModel2 = ref(50);
   const splitterModel3 = ref(50);
   function handleUpdate(value) {
       // Do what you need to do with value here
       console.log(value);
   }
    ...
return {
splitterModel,
splitterModel2,
splitterModel3,
handleUpdate,
...

选项2

也可以像解释的这里那样设置一个观察者