@opentiny/vue-docs 2.2.18 → 2.2.20

package/demos/pc/app/card/card-group.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card-group check-type="radio" v-model="checked" @change="change">
+      <tiny-card title="这是卡片标题" label="1" :options="options">
+        <p>
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        </p>
+      </tiny-card>
+      <tiny-card title="这是卡片标题" label="2" :options="options">
+        <p>
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        </p>
+      </tiny-card>
+      <tiny-card title="这是卡片标题" label="3" :options="options">
+        <p>
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        </p>
+      </tiny-card>
+      <tiny-card title="这是卡片标题" label="4" :options="options">
+        <p>
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+          这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        </p>
+      </tiny-card>
+    </tiny-card-group>
+  </div>
+</template>
+
+<script>
+import { Card, CardGroup } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyCard: Card,
+    TinyCardGroup: CardGroup
+  },
+  data() {
+    return {
+      checked: '',
+      options: [
+        {
+          text: '删除列表',
+          icon: IconDel()
+        },
+        {
+          text: '编辑',
+          icon: IconWriting(),
+          disabled: true
+        },
+        {
+          text: '排序',
+          icon: IconAscending()
+        },
+        {
+          text: '分享',
+          icon: IconShare(),
+          disabled: true
+        }
+      ]
+    }
+  },
+  methods: {
+    change(val) {
+      console.log(val)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

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

@@ -0,0 +1,59 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是mini尺寸卡片" size="mini" :options="options">
+      <p>这是一段长文本内容，这是一段长文本内容</p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是small尺寸卡片" size="small" :options="options">
+      <p>这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容</p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是medium尺寸卡片" size="medium" :options="options">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是large尺寸卡片" size="large" :options="options">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+import { ref } from 'vue'
+
+const options = ref([
+  {
+    text: '删除列表',
+    icon: IconDel()
+  },
+  {
+    text: '编辑',
+    icon: IconWriting(),
+    disabled: true
+  },
+  {
+    text: '排序',
+    icon: IconAscending()
+  },
+  {
+    text: '分享',
+    icon: IconShare(),
+    disabled: true
+  }
+])
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

package/demos/pc/app/card/card-size.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是mini尺寸卡片" size="mini" :options="options">
+      <p>这是一段长文本内容，这是一段长文本内容</p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是small尺寸卡片" size="small" :options="options">
+      <p>这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容</p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是medium尺寸卡片" size="medium" :options="options">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是large尺寸卡片" size="large" :options="options">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script>
+import { Card } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyCard: Card
+  },
+  data() {
+    return {
+      options: [
+        {
+          text: '删除列表',
+          icon: IconDel()
+        },
+        {
+          text: '编辑',
+          icon: IconWriting(),
+          disabled: true
+        },
+        {
+          text: '排序',
+          icon: IconAscending()
+        },
+        {
+          text: '分享',
+          icon: IconShare(),
+          disabled: true
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

package/demos/pc/app/card/card-status-composition-api.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是default状态" status="default">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是success状态" status="success">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是warning状态" status="warning">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是alerting状态" status="alerting">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是danger状态" status="danger">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

package/demos/pc/app/card/card-status.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是default状态" status="default">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是success状态" status="success">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是warning状态" status="warning">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是alerting状态" status="alerting">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是danger状态" status="danger">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script>
+import { Card } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCard: Card
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

package/demos/pc/app/card/card-type-composition-api.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是文本类型" type="text">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是图片类型" type="image" :src="dsj">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card
+      title="这是视频类型"
+      type="video"
+      src="http://hicdev.huawei.com/mirrors/academy/Intro%20to%20Vue.js/1%29%20The%20Vue%20Instance.mp4"
+    >
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是logo类型" type="logo" size="mini" :src="userHead">
+      <p>这是一段长文本内容，这是一段长文本内容</p>
+    </tiny-card>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const dsj = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`)
+const userHead = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`)
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

package/demos/pc/app/card/card-type.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是文本类型" type="text">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是图片类型" type="image" :src="dsj">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card
+      title="这是视频类型"
+      type="video"
+      src="http://hicdev.huawei.com/mirrors/academy/Intro%20to%20Vue.js/1%29%20The%20Vue%20Instance.mp4"
+    >
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是logo类型" type="logo" size="mini" :src="useHead">
+      <p>这是一段长文本内容，这是一段长文本内容</p>
+    </tiny-card>
+  </div>
+</template>
+
+<script>
+import { Card } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCard: Card
+  },
+  data() {
+    return {
+      dsj: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`,
+      useHead: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

package/demos/pc/app/card/check-type-checkbox-composition-api.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是mini尺寸卡片" v-model="checkboxValue" check-type="checkbox" label="1">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是small尺寸卡片" v-model="radioValue" check-type="radio" label="2">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const radioValue = ref(false)
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

package/demos/pc/app/card/check-type-checkbox.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是mini尺寸卡片" v-model="checkboxValue" check-type="checkbox" label="1">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是small尺寸卡片" v-model="radioValue" check-type="radio" label="2">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script>
+import { Card } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCard: Card
+  },
+  data() {
+    return {
+      checkboxValue: true,
+      radioValue: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

package/demos/pc/app/card/check-type-radio-composition-api.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是mini尺寸卡片" v-model="value" check-type="radio" label="1">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是samll尺寸卡片" v-model="value" check-type="radio" label="2">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const value = ref('1')
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

package/demos/pc/app/card/check-type-radio.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是mini尺寸卡片" v-model="value" check-type="radio" label="1">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是samll尺寸卡片" v-model="value" check-type="radio" label="2">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script>
+import { Card } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyCard: Card
+  },
+  data() {
+    return {
+      value: '1'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

package/demos/pc/app/card/custom-class-composition-api.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是卡片标题" card-class="my-card">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是卡片标题" :options="options" height="100px">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script setup>
+import { Card as TinyCard } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+import { ref } from 'vue'
+
+const options = ref([
+  {
+    text: '删除列表',
+    icon: IconDel()
+  },
+  {
+    text: '编辑',
+    icon: IconWriting(),
+    disabled: true
+  },
+  {
+    text: '排序',
+    icon: IconAscending()
+  },
+  {
+    text: '分享',
+    icon: IconShare(),
+    disabled: true
+  }
+])
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>

package/demos/pc/app/card/custom-class.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="card-wrap">
+    <tiny-card title="这是卡片标题" card-class="my-card">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+    <br />
+    <tiny-card title="这是卡片标题" :options="options" height="100px">
+      <p>
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+        这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
+      </p>
+    </tiny-card>
+  </div>
+</template>
+
+<script>
+import { Card } from '@opentiny/vue'
+import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyCard: Card
+  },
+  data() {
+    return {
+      options: [
+        {
+          text: '删除列表',
+          icon: IconDel()
+        },
+        {
+          text: '编辑',
+          icon: IconWriting(),
+          disabled: true
+        },
+        {
+          text: '排序',
+          icon: IconAscending()
+        },
+        {
+          text: '分享',
+          icon: IconShare(),
+          disabled: true
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.card-wrap {
+  background: #f5f5f5;
+  padding: 16px;
+}
+</style>