@gmcb/uv-ui 0.2.26 → 0.3.0

package/docs/components/tabs.md

@@ -0,0 +1,364 @@
+## Tabs 标签选项卡 <to-api/>
+
+<demo-model url="/pages/componentsD/tabs/tabs"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-tabs**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-tabs)
+
+:::
+
+该组件是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动且自动居中。 <br>
+该组件的一个特点是配置为滚动模式时，激活的`tab`会自动移动到组件的中间位置。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+::: warning 注意
+
+1、该组件使用了`scroll-view`标签，`H5`等平台可能出现滚动条，需要全局设置滚动条样式，局部设置不生效，所以建议引入index.scss基础样式，请参考[扩展配置-基础样式](https://www.uvui.cn/components/setting.html#%E6%89%A9%E5%B1%95%E9%85%8D%E7%BD%AE-%E5%9F%BA%E7%A1%80%E6%A0%B7%E5%BC%8F)
+
+2、如果在弹窗等场景使用显示异常，需要使用`v-if`进行控制，详情请参考[为什么部分组件在弹出层中显示异常或功能异常](https://www.uvui.cn/components/problem.html#五、为什么部分组件在弹出层中显示异常或功能异常)
+
+:::
+
+### 基本使用
+
+- 通过设置`scrollable`(默认为`true`)，配置tabs组件的内容是否可以左右拖动，一般4个标签以下时，无需拖动，设置为`false`，5个标签以上，建议可以左右拖动。  
+- tabs标签的切换，需要绑定`current`值，在`change`事件回调中可以得到`index`，将其赋值给`current`即可。
+
+具体的标签，通过`list`参数配置，该参数要求为数组，元素为对象，对象要有`name`属性，见示例：
+
+:::tip 说明
+`scrollable`参数很重要，如果您的tabs项只有几个，且不想tabs导航栏可以被左右滑动的话，请一定要设置`scrollable`为`false`，因为它默认为`true`。这样设置后，整体会自动居中。
+:::
+
+
+```vue
+<template>
+	<uv-tabs :list="list" @click="click"></uv-tabs>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref([{
+  name: '关注'
+}, {
+  name: '推荐'
+}, {
+  name: '电影'
+}, {
+  name: '科技'
+}, {
+  name: '音乐'
+}, {
+  name: '美食'
+}, {
+  name: '文化'
+}, {
+  name: '财经'
+}, {
+  name: '手工'
+}]);
+function click(item) {
+  console.log('item', item);
+}
+
+</script>
+```
+
+
+### 粘性布局
+
+通过加上`uv-sticky`来使tabs滑动浮动在最顶部。
+
+```vue
+<template>
+	<uv-sticky bgColor="#fff">
+		<uv-tabs :list="list"></uv-tabs>
+	</uv-sticky>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref([{
+  name: '关注'
+}, {
+  name: '推荐'
+}, {
+  name: '电影'
+}, {
+  name: '科技'
+}, {
+  name: '音乐'
+}, {
+  name: '美食'
+}, {
+  name: '文化'
+}, {
+  name: '财经'
+}, {
+  name: '手工'
+}]);
+
+</script>
+```
+
+
+### 显示徽标
+
+可以通过在列表对象中加入`badge`来设置徽标。
+
+```vue
+<template>
+	<uv-tabs :list="list"></uv-tabs>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref([{
+  name: '关注'
+}, {
+  name: '推荐',
+  badge: {
+    isDot: true
+  }
+}, {
+  name: '电影',
+  badge: {
+    value: 5
+  }
+}, {
+  name: '科技'
+}, {
+  name: '音乐'
+}, {
+  name: '美食'
+}, {
+  name: '文化'
+}, {
+  name: '财经'
+}, {
+  name: '手工'
+}]);
+
+</script>
+```
+
+### 禁用
+
+可以通过在列表对象中加入`disabled = true`来设置禁用。
+
+```vue
+<template>
+	<uv-tabs :list="list"></uv-tabs>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref([{
+  name: '关注',
+  disabled: true
+}, {
+  name: '推荐',
+  badge: {
+    isDot: true
+  }
+}, {
+  name: '电影',
+  badge: {
+    value: 5
+  }
+}, {
+  name: '科技',
+  disabled: true
+}, {
+  name: '音乐'
+}, {
+  name: '美食'
+}, {
+  name: '文化'
+}, {
+  name: '财经'
+}, {
+  name: '手工'
+}]);
+
+</script>
+```
+
+
+### 自定义样式
+
+通过使用`activeStyle`、`inactiveStyle`、`itemStyle`来设置tabs的样式。
+
+```vue
+<template>
+	<uv-tabs 
+		:list="list" 
+		lineWidth="30" 
+		lineColor="#f56c6c" 
+		:activeStyle="{
+			color: '#303133',
+			fontWeight: 'bold',
+			transform: 'scale(1.05)'
+    	}"
+		:inactiveStyle="{
+			color: '#606266',
+			transform: 'scale(1)'
+		}" 
+		itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
+		></uv-tabs>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref([{
+  name: '关注'
+}, {
+  name: '推荐',
+  badge: {
+    isDot: true
+  }
+}, {
+  name: '电影'
+}, {
+  name: '科技'
+}, {
+  name: '音乐'
+}, {
+  name: '美食'
+}, {
+  name: '文化'
+}, {
+  name: '财经'
+}, {
+  name: '手工'
+}]);
+
+</script>
+```
+
+### 滑块设置背景图
+
+通过使用`lineColor`来设置滑块背景图。
+
+```vue
+<template>
+	<uv-tabs :list="list" :lineColor="`url(${lineBg}) 100% 100%`"></uv-tabs>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const lineBg =
+	'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAOCAYAAABdC15GAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFxSURBVHgBzZNRTsJAEIb/WTW+lpiY+FZPIDew3ABP4GJ8hxsI9zBpOYHeQDwBPQI+mRiRvpLojtPdYhCorQqF/6GdbGd2vvwzBXZcNAt4oj1ANeUoAT5iqkUjbEFLHNmhD1YPEvpZ3ghkGlVDCkc94/BmHMq998I5ONiY1ZBfpKAyuOtgAc5yOEDmYEWNh32BHF91sGHZHmwW4azciN9aQwnz3SJEgOmte+R2tdLprTYoa50mvuomlLpD4Y3oQZnov6D2RzCqI93bWOHaEmAGqQUyRBlZR1WfarcD/EJ2z8DtzDGvsMCwpm8XOCfDUsVOCYhiqRxI/CTQo4UOvjzO7Pow18vfywneuUHHUUxLn55lLw5JFpZ8bEUcY8oXdOLWiHLTxvoGpLqoUmy6dBT15o/ox3znpoycAmxUsiJTbs1cmxeVKp+0zmFIS7bGWiVghC7Vwse8jFKAX9eljh4ggKLLv7uaQvG9/F59Oo2SouxPu7OTCxN/s8wAAAAASUVORK5CYII=';
+const list = ref([{
+	name: '关注'
+}, {
+	name: '推荐',
+	badge: {
+		isDot: true
+	}
+}, {
+	name: '电影'
+}, {
+	name: '科技'
+}, {
+	name: '音乐'
+}, {
+	name: '美食'
+}, {
+	name: '文化'
+}, {
+	name: '财经'
+}, {
+	name: '手工'
+}]);
+</script>
+```
+
+### 右侧自定义插槽
+
+```vue
+<template>
+	<uv-tabs :list="list">
+		<template v-slot:right>
+			<view style="padding-left: 4px;" @tap="toast">
+				<uv-icon name="list" size="21" bold></uv-icon>
+			</view>
+		</template>
+	</uv-tabs>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const list = ref([{
+  name: '关注'
+}, {
+  name: '推荐'
+}, {
+  name: '电影'
+}, {
+  name: '科技'
+}, {
+  name: '音乐'
+}, {
+  name: '美食'
+}, {
+  name: '文化'
+}, {
+  name: '财经'
+}, {
+  name: '手工'
+}]);
+function toast() {
+  uni.showToast({
+    icon: 'none',
+    title: '插槽被点击'
+  });
+}
+
+</script>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Tabs Props
+
+| 参数								| 说明																		| 类型					| 默认值					|  可选值	|
+|:-									|:-																			|:-						|:-						|:-			|
+| duration							| 滑块移动一次所需的时间，单位`ms`									| String &#124; Number	| 300					| -			|
+| list								| 标签数组，元素为对象，如`[{name: '推荐'}]`										| Array					| -						| -			|
+| lineColor							| 滑块颜色                              									| String					| #3c9cff						| -			|
+| activeStyle						| 菜单选择中时的样式														| String &#124; Object		| { color: '#303133' }				| -			|
+| inactiveStyle						| 菜单非选中时的样式														| String &#124; Object		| { color: '#606266' }				| -			|
+| lineWidth							| 滑块长度      															| String &#124; Number	| 20					| -			|
+| lineHeight						| 滑块高度      															| String &#124; Number	| 3						| -			|
+| lineBgSize  | 滑块背景显示大小，当滑块背景设置为图片时使用     							| String               	| cover 				| -			|
+| itemStyle					    	| 菜单item的样式      													| String &#124; Object	| { height: '44px' }					| -			|
+| scrollable						| 菜单是否可滚动，**选项很少的时候设置为false整个tabs自动居中显示**						        							| Boolean				| true					| true &#124; false		|
+| current							| 当前选中标签的索引      															| String &#124; Number	| 0					| -			|
+| keyName							| 从`list`元素对象中读取的键名											| String	| name					| -			|
+| customStyle							| 自定义样式										| Object	| -					| -			|
+
+
+### Tabs Events
+
+|事件名	|说明			|回调参数							|
+|:-		|:-				|:-									|
+| @click	|点击标签时触发	| index: 标签索引值，item: 传入的其他值	|
+| @change	|标签索引改变时触发(`disalbed`时不会触发)	| index: 标签索引值，item: 传入的其他值	|

package/docs/components/tag.md

@@ -0,0 +1,227 @@
+## Tag 标签 <to-api/>
+
+<demo-model url="/pages/componentsD/tag/tag"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-tags**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-tags)
+
+:::
+
+tag组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+- 通过`type`参数设置主题类型，默认为`primary`
+- 属性`text`设置标签内容
+
+```vue
+<uv-tags text="标签" plain size="mini" type="warning"></uv-tags>
+```
+
+### 自定义主题
+
+```vue
+<uv-tags text="标签"></uv-tags>
+<uv-tags text="标签" type="warning"></uv-tags>
+<uv-tags text="标签"type="success"></uv-tags>
+<uv-tags text="标签" type="error"></uv-tags>
+```
+
+### 圆形标签
+
+- 类似胶囊形状
+```vue
+<uv-tags text="标签" plain shape="circle"></uv-tags>
+<uv-tags text="标签" type="warning" shape="circle"></uv-tags>
+```
+### 镂空标签
+
+```vue
+<uv-tags text="标签" plain > </uv-tags>
+<uv-tags text="标签" type="warning" plain></uv-tags>
+<uv-tags text="标签" type="success" plain></uv-tags>
+<uv-tags text="标签" type="error" plain></uv-tags>
+```
+
+### 镂空带背景色
+
+- 添加`plainFill`属性镂空带背景色
+```vue
+<uv-tags text="标签" plain > </uv-tags>
+<uv-tags text="标签" type="warning" plain plainFill></uv-tags>
+<uv-tags text="标签" type="success" plain plainFill></uv-tags>
+<uv-tags text="标签" type="error" plain plainFill></uv-tags>
+```
+
+### 自定义尺寸
+
+- `size`属性为您提供了三种规格的标签大小，默认中等。
+```vue
+<uv-tags text="标签" plain size="mini"></uv-tags>
+<uv-tags text="标签" type="warning"></uv-tags>
+<uv-tags text="标签" type="success" plain size="large"></uv-tags>
+```
+### 可关闭标签
+
+- `tag`在右上角提供了删除标签的样式
+```vue
+<template>
+	<view>
+		<uv-tags text="标签" size="mini" closable :show="close1" @close="close1 = false"></uv-tags>
+		<uv-tags text="标签" type="warning" closable :show="close2" @close="close2 = false"></uv-tags>
+		<uv-tags 
+			text="标签" 
+			type="success" 
+			plain 
+			size="large" 
+			closable 
+			:show="close3" 
+			@close="close3 = false">
+		</uv-tags>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const close1 = ref(true);
+const close2 = ref(true);
+const close3 = ref(true);
+const radios = ref([{
+  checked: true
+}, {
+  checked: false
+}, {
+  checked: false
+}]);
+const checkboxs = ref([{
+  checked: true
+}, {
+  checked: false
+}, {
+  checked: false
+}]);
+
+</script>
+```
+
+### 带图片和图标
+
+```vue
+<template>
+	<view>
+		<uv-tags text="标签" size="mini" icon="map" plain></uv-tags>
+		<uv-tags text="标签" type="warning" icon="tags-fill"></uv-tags>
+		<uv-tags 
+			text="标签" 
+			type="success" 
+			plain size="large" 
+			icon="https://cdn.uviewui.com/uview/example/tag.png">
+		<uv-tags>
+	</view>
+</template>
+```
+
+### 单选标签 和 多选标签
+
+- 我们为您提供了单选和多选的事件，您可以在事件中获取参数列表
+```vue
+<template>
+	<view>
+		<!-- 单选 -->
+		<!-- <view class="uv-page__tag-item" v-for="(item, index) in radios" :key="index">
+			<uv-tags :text="`选项${index + 1}`" :plain="!item.checked" type="warning" :name="index" @click="radioClick">
+			</uv-tags>
+		</view> -->
+		<!-- 多选 -->
+		<view class="uv-page__tag-item" v-for="(item, index) in checkboxs" :key="index">
+			<uv-tags 
+				:text="`选项${index + 1}`" 
+				:plain="!item.checked" 
+				type="warning" 
+				:name="index" 
+				@click="checkboxClick">
+			</uv-tags>
+		</view>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const radios = ref([{
+  checked: true
+}, {
+  checked: false
+}, {
+  checked: false
+}]);
+const checkboxs = ref([{
+  checked: true
+}, {
+  checked: false
+}, {
+  checked: false
+}]);
+function radioClick(name) {
+  radios.value.map((item, index) => {
+    item.checked = index === name ? true : false;
+  });
+}
+function checkboxClick(name) {
+  checkboxs.value[name].checked = !checkboxs.value[name].checked;
+}
+
+</script>
+<style lang="scss">
+	.uv-page__tag-item {
+		margin-right: 20px;
+	}
+</style>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Tag Props
+
+| 参数			| 说明												| 类型					| 默认值		|  可选值							|
+|:-				|:-													|:-						|:-			|:-									|
+| type			| 主题类型											| String				| primary	| primary  &#124;success &#124; info &#124; warning &#124; error	|
+| disabled		| 不可用												| Boolean &#124; String	| false		| -									|
+| size			| 标签大小											| String				| medium	|medium &#124; large  &#124;mini						|
+| shape			| 标签形状											| String				| square	| circle &#124;	square						|
+| text			| 标签的文字内容										| String &#124; Number	| -			| -									|
+| bgColor		| 背景颜色，默认为空字符串，即不处理					| String				| #C6C7CB		| -									|
+| color			| 标签字体颜色，默认为空字符串，即不处理				| String				| -			| -									|
+| borderColor	| 标签的边框颜色								| String				| -			| -									|
+| closeColor	| 关闭按钮图标的颜色									| String				| -			| -									|
+| name			| 点击时返回的索引值，用于区分例遍的数组哪个元素被点击了	| String &#124; Number	| -			| -									|
+| plainFill		| 镂空时是否填充背景色								| Boolean				| false		| true	&#124; false							|
+| plain			| 是否镂空											| Boolean				| false		| true	&#124; false							|
+| closable		| 是否可关闭，设置为`true`，文字右边会出现一个关闭图标	| Boolean				| false		| true	&#124; false							|
+| show			| 标签显示与否										| Boolean				| true		| true		&#124; false						|
+| icon			| 内置图标，或绝对路径的图片							| String				| -			| -									|
+| cellChild | 是否属于cell节点下。`nvue`模式下的该组件在cell或uv-list等组件下使用，该值最好是设置成true，避免回收后不显示的BUG。 | Boolean | false | true &#124; false|
+
+### Tag Event
+
+|事件名	|说明											|回调参数					|
+|:-		|:-												|:-							|
+| click	| 点击标签触发									| index: 传递的`index`参数值	|
+| close	| `closable`为`true`时，点击标签关闭按钮触发		| index: 传递的`index`参数值	|

package/docs/components/testPic.md

@@ -0,0 +1,20 @@
+## 测试占位图
+
+`uv-ui`从上线开始就使用的`uview`的图片资源，由于他们的用户较多，每天产生的cdn流量较大，前段时间已经将资源做了防盗链，除了我们几个`UI`框架，其他项目都不能正常使用。
+开发者们在使用案例的时候，请替换成其他图片地址或下面的在线占位图，否则您会有疑问为什么组件示例不显示图片。下面将提供几个在线占位图进行测试使用，后期示例里面也会逐渐替换。
+
+
+## 在线占位图
+
+| 官网地址 | 占位图片示例 | 说明 |
+|:-|:-|:-|
+|[https://placeholder.com](https://placeholder.com)| [https://via.placeholder.com/400x200.png/3c9cff/fff](https://via.placeholder.com/400x200.png/3c9cff/fff) | 400x200 - 宽高，3c9cff - 背景颜色，fff - 文本颜色 |
+|[https://dummyimage.com](https://dummyimage.com)| [https://dummyimage.com/400x200/3c9cff/fff](https://dummyimage.com/400x200/3c9cff/fff) | 400x200 - 宽高，3c9cff - 背景颜色，fff - 文本颜色 |
+|[https://fakeimg.pl](https://fakeimg.pl)|[https://fakeimg.pl/400x200/3c9cff/fff](https://fakeimg.pl/400x200/3c9cff/fff)| 400x200 - 宽高，3c9cff - 背景颜色，fff - 文本颜色 |
+
+
+## 使用案例
+
+```vue
+<image src="https://via.placeholder.com/400x200.png/3c9cff/fff"></image>
+```