@opentiny/vue-docs 3.19.2 → 3.19.4

package/demos/pc/app/currency/set-default-custom-service.vue

@@ -1,12 +1,14 @@
 <template>
-  <tiny-currency
-    v-model="value"
-    placeholder="请选择"
-    set-default
-    :fetch-default-currency="fetchDefaultCurrency"
-    :set-default-currency="setDefaultCurrency"
-    @change="change"
-  ></tiny-currency>
+  <div class="demo-currency-class">
+    <tiny-currency
+      v-model="value"
+      placeholder="请选择"
+      set-default
+      :fetch-default-currency="fetchDefaultCurrency"
+      :set-default-currency="setDefaultCurrency"
+      @change="change"
+    ></tiny-currency>
+  </div>
 </template>
 
 <script>
@@ -48,3 +50,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/currency/set-default.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-currency v-model="value" placeholder="请选择" set-default></tiny-currency>
+  <div class="demo-currency-class">
+    <tiny-currency v-model="value" placeholder="请选择" set-default></tiny-currency>
+  </div>
 </template>
 
 <script>
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-currency-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/currency/size-composition-api.vue

@@ -1,6 +1,12 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" size="medium" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" size="small" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" size="mini" placeholder="请选择" @change="change"></tiny-currency>
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
@@ -17,6 +23,9 @@ function change(value) {
 </script>
 
 <style scoped>
+.demo-currency-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

package/demos/pc/app/currency/size.vue

@@ -1,6 +1,12 @@
 <template>
-  <div>
+  <div class="demo-currency-class">
     <tiny-currency v-model="value" size="medium" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" size="small" placeholder="请选择" @change="change"></tiny-currency>
+    <br /><br />
+    <tiny-currency v-model="value" size="mini" placeholder="请选择" @change="change"></tiny-currency>
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
@@ -26,6 +32,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-currency-class {
+  width: 280px;
+}
 p {
   font-size: 14px;
   line-height: 1.5;

package/demos/pc/app/dept/auto-select-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" :auto-select="false"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" :auto-select="false"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dept/auto-select.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" :auto-select="false"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" :auto-select="false"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dept/basic-usage-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dept/basic-usage.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dept/before-confirm-composition-api.vue

@@ -1,9 +1,7 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
-      <tiny-dept v-model="value" :before-confirm="beforeConfirm"></tiny-dept>
-    </div>
+    <tiny-dept v-model="value" :before-confirm="beforeConfirm"></tiny-dept>
   </div>
 </template>
 
@@ -23,8 +21,8 @@ function beforeConfirm() {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;

package/demos/pc/app/dept/before-confirm.vue

@@ -1,9 +1,7 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
-      <tiny-dept v-model="value" :before-confirm="beforeConfirm"></tiny-dept>
-    </div>
+    <tiny-dept v-model="value" :before-confirm="beforeConfirm"></tiny-dept>
   </div>
 </template>
 
@@ -32,8 +30,8 @@ export default {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;

package/demos/pc/app/dept/custom-service-composition-api.vue

@@ -1,10 +1,12 @@
 <template>
-  <tiny-dept
-    v-model="value"
-    :fetch-dept-by-value="getfetchDeptByValue"
-    :fetch-dept="getfetchDept"
-    :fetch-dept-list="getDeptList"
-  ></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept
+      v-model="value"
+      :fetch-dept-by-value="getfetchDeptByValue"
+      :fetch-dept="getfetchDept"
+      :fetch-dept-list="getDeptList"
+    ></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -274,3 +276,9 @@ function getDeptList(upperCode) {
   })
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dept/custom-service.vue

@@ -1,10 +1,12 @@
 <template>
-  <tiny-dept
-    v-model="value"
-    :fetch-dept-by-value="getfetchDeptByValue"
-    :fetch-dept="getfetchDept"
-    :fetch-dept-list="getDeptList"
-  ></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept
+      v-model="value"
+      :fetch-dept-by-value="getfetchDeptByValue"
+      :fetch-dept="getfetchDept"
+      :fetch-dept-list="getDeptList"
+    ></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -281,3 +283,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dept/dept-cancel-composition-api.vue

@@ -1,9 +1,7 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
-      <tiny-dept v-model="value" @cancel="cancel"></tiny-dept>
-    </div>
+    <tiny-dept v-model="value" @cancel="cancel"></tiny-dept>
   </div>
 </template>
 
@@ -19,8 +17,8 @@ function cancel() {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;

package/demos/pc/app/dept/dept-cancel.vue

@@ -1,9 +1,7 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
-      <tiny-dept v-model="value" @cancel="cancel"></tiny-dept>
-    </div>
+    <tiny-dept v-model="value" @cancel="cancel"></tiny-dept>
   </div>
 </template>
 
@@ -28,8 +26,8 @@ export default {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;

package/demos/pc/app/dept/dept-close-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" @close="close"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" @close="close"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -12,3 +14,9 @@ function close() {
   TinyModal.message('关闭弹出框')
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dept/dept-close.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" @close="close"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" @close="close"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -21,3 +23,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dept/dept-confirm-composition-api.vue

@@ -1,9 +1,7 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
-      <tiny-dept v-model="value" @confirm="confirm"></tiny-dept>
-    </div>
+    <tiny-dept v-model="value" @confirm="confirm"></tiny-dept>
   </div>
 </template>
 
@@ -19,8 +17,8 @@ function confirm() {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;

package/demos/pc/app/dept/dept-confirm.vue

@@ -1,9 +1,7 @@
 <template>
-  <div class="demo-dept">
+  <div class="demo-dept-class">
     <h3 class="title">基本用法</h3>
-    <div class="content">
-      <tiny-dept v-model="value" @confirm="confirm"></tiny-dept>
-    </div>
+    <tiny-dept v-model="value" @confirm="confirm"></tiny-dept>
   </div>
 </template>
 
@@ -28,8 +26,8 @@ export default {
 </script>
 
 <style scoped>
-.demo-dept .tiny-dept {
-  width: 270px;
+.demo-dept-class {
+  width: 280px;
 }
 .title {
   font-size: 14px;

package/demos/pc/app/dept/dept-events-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" @change="change" @open="open"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" @change="change" @open="open"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -16,3 +18,9 @@ function change(value) {
   TinyModal.message({ message: '改变的部门值: ' + value, status: 'info' })
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dept/dept-events.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" @change="change" @open="open"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" @change="change" @open="open"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -24,3 +26,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dept/dept-selected-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" @selected="selected"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" @selected="selected"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -12,3 +14,9 @@ function selected(value) {
   TinyModal.message({ message: '下拉选项值改变为: ' + value, status: 'info' })
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dept/dept-selected.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" @selected="selected"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" @selected="selected"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -21,3 +23,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dept/dynamic-disable-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" disabled></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" disabled></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dept/dynamic-disable.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" disabled></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" disabled></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dept/size-composition-api.vue

@@ -1,5 +1,13 @@
 <template>
-  <tiny-dept v-model="value" size="medium"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" size="medium"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value" size="small"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value" size="mini"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +16,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dept/size.vue

@@ -1,5 +1,13 @@
 <template>
-  <tiny-dept v-model="value" size="medium"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" size="medium"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value" size="small"></tiny-dept>
+    <br />
+    <tiny-dept v-model="value" size="mini"></tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -16,3 +24,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dept/slot-hrapprover-composition-api.vue

@@ -1,9 +1,11 @@
 <template>
-  <tiny-dept :value="value" size="medium">
-    <template #hrapprover="data">
-      <div>{{ data.slotScope.hrapprover }}</div>
-    </template>
-  </tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept :value="value">
+      <template #hrapprover="data">
+        <div>{{ data.slotScope.hrapprover }}</div>
+      </template>
+    </tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -12,3 +14,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dept/slot-hrapprover.vue

@@ -1,9 +1,11 @@
 <template>
-  <tiny-dept :value="value" size="medium">
-    <template #hrapprover="data">
-      <div>{{ data.slotScope.hrapprover }}</div>
-    </template>
-  </tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept :value="value">
+      <template #hrapprover="data">
+        <div>{{ data.slotScope.hrapprover }}</div>
+      </template>
+    </tiny-dept>
+  </div>
 </template>
 
 <script lang="jsx">
@@ -20,3 +22,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>

package/demos/pc/app/dept/title-composition-api.vue

@@ -1,5 +1,7 @@
 <template>
-  <tiny-dept v-model="value" title="部门"></tiny-dept>
+  <div class="demo-dept-class">
+    <tiny-dept v-model="value" title="部门"></tiny-dept>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -8,3 +10,9 @@ import { TinyDept } from '@opentiny/vue'
 
 const value = ref('022471')
 </script>
+
+<style scoped>
+.demo-dept-class {
+  width: 280px;
+}
+</style>