uview-plus

https://uview-plus.jiangruyi.com/
Admin
uview-plus is a comprehensive UI framework for uni-app ecosystem that is fully compatible with nvue,...
Tokens:275,297
Snippets:2,267
Trust Score:6.1
Update:3 months ago
Show doc for...
Tokens:
Raw
### Basic Guide Component Usage (Vue Script Setup)

Source: https://uview-plus.jiangruyi.com/components/guide.html

Vue 3 script setup for the Guide component, defining reactive state for visibility and the list of onboarding steps.

```javascript
import { ref } from 'vue'

const show = ref(true)
const list = ref([
  {
    image: '/static/uview/common/logo.png',
    title: '欢迎使用 uview-plus',
    desc: '一套跨端可复用的高质量组件库。'
  },
  {
    image: '/static/uview/common/gray-logo.png',
    title: '引导页支持多页滑动',
    desc: '可配置跳过、下一步和立即体验。'
  },
  {
    image: '/static/uview/common/logo.jpg',
    title: '只显示一次',
    desc: '默认内置本地存储记忆能力。'
  }
])

```

--------------------------------

### Guide Component: Event Handling

Source: https://uview-plus.jiangruyi.com/components/guide.html

Example of how to listen for various events emitted by the Guide component, such as page changes, skip, finish, and close.

```html
<up-guide
  v-model:show="show"
  :list="list"
  @change="onChange"
  @skip="onSkip"
  @finish="onFinish"
  @close="onClose"
/>

```

--------------------------------

### ShortVideo Script Setup Example

Source: https://uview-plus.jiangruyi.com/components/shortVideo.html

This script uses Vue's Composition API with `<script setup>` to manage the state and logic for the ShortVideo component. It defines reactive references for current tab and video indices, and arrays for tab and video data, along with event handler functions.

```javascript
import { ref } from 'vue';

const currentTab = ref(0);
const currentVideo = ref(0);

const tabsList = ref([
  { name: '推荐' },
  { name: '关注' },
  { name: '朋友' },
  { name: '本地' }
]);

const videoList = ref([
  {
    videoUrl: 'http://qn-o.jiangruyi.com/rjtsdl.MP4',
    progress: 0,
    bgColor: '#000',
    author: {
      avatar: '/static/avatar1.jpg',
      name: '创作者1',
      desc: '这是一段视频描述'
    },
    isLiked: false,
    likeCount: 128,
    commentCount: 25,
    shareCount: 12,
    collectCount: 8,
    isCollected: false
  },
  {
    videoUrl: 'http://qn-o.jiangruyi.com/shanghai.mp4',
    progress: 0,
    bgColor: '#000',
    author: {
      avatar: '/static/avatar2.jpg',
      name: '创作者2',
      desc: '记录美好生活'
    },
    isLiked: true,
    likeCount: 863,
    commentCount: 96,
    shareCount: 32,
    collectCount: 45,
    isCollected: true
  }
]);

const onTabChange = (index) => {
  console.log('切换tab到:', index);
  currentTab.value = index;
};

const onVideoChange = (index) => {
  console.log('切换视频到:', index);
  currentVideo.value = index;
};

const onLike = ({ item, index }) => {
  console.log('点赞视频:', index);
  // 更新点赞状态和数量
  videoList.value[index].isLiked = !videoList.value[index].isLiked;
  videoList.value[index].likeCount += videoList.value[index].isLiked ? 1 : -1;
};

const onComment = ({ item, index }) => {
  console.log('评论视频:', index);
  uni.showToast({
    title: '评论功能',
    icon: 'none'
  });
};

const onShare = ({ item, index }) => {
  console.log('分享视频:', index);
  uni.showToast({
    title: '分享功能',
    icon: 'none'
  });
};

const onCollect = ({ item, index }) => {
  console.log('收藏视频:', index);
  // 更新收藏状态和数量
  videoList.value[index].isCollected = !videoList.value[index].isCollected;
  videoList.value[index].collectCount += videoList.value[index].isCollected ? 1 : -1;
};

```

--------------------------------

### ReadMore Component Setup (Script Setup)

Source: https://uview-plus.jiangruyi.com/components/readMore.html

Vue 3 script setup example for the ReadMore component. Initializes `content` and `shadowStyle`, setting `backgroundImage` to 'none' to disable the shadow.

```javascript
<script setup>
import { reactive } from 'vue';

const state = reactive({
  content: '',
  shadowStyle: {
    backgroundImage: "none",
    paddingTop: "0",
    marginTop: "20rpx"
  }
});
</script>
```

--------------------------------

### Basic Signature Example

Source: https://uview-plus.jiangruyi.com/components/signature.html

Demonstrates the basic setup of the up-signature component with default settings. It includes a preview of the captured signature and a button to clear it.

```vue
<template>
  <view class="u-page">
    <view class="u-page__item">
      <text class="u-page__item__title">基础签名示例</text>
      <view class="u-page__item__content">
        <up-signature 
          ref="signature1" 
          :width="300" 
          :height="200" 
          bg-color="#f5f5f5"
          :show-toolbar="false"
          @confirm="onConfirm1"
          @error="onError1"
        ></up-signature>
        
        <view class="preview" v-if="signatureImage1">
          <text>签名预览:</text>
          <image :src="signatureImage1" class="preview-image"></image>
          <up-button type="primary" size="small" @click="clearSignature1">清除签名</up-button>
        </view>
      </view>
    </view>
    
    <view class="u-page__item">
      <text class="u-page__item__title">自定义颜色和工具栏示例</text>
      <view class="u-page__item__content">
        <up-signature 
          ref="signature2" 
          :width="300" 
          :height="200" 
          color="#ff0000"
          thickness="6"
          bg-color="#f5f5f5"
          @confirm="onConfirm2"
          @error="onError2"
        ></up-signature>
        
        <view class="preview" v-if="signatureImage2">
          <text>签名预览:</text>
          <image :src="signatureImage2" class="preview-image"></image>
          <up-button type="primary" size="small" @click="clearSignature2">清除签名</up-button>
        </view>
      </view>
    </view>
  </view>
</template>

```

--------------------------------

### Using uParse Component with Setup Script (Aliased)

Source: https://uview-plus.jiangruyi.com/components/quickstart.html

Shows how to use the uParse component after aliasing it to avoid naming conflicts with uView Plus components. This example uses a setup script.

```vue
<template>
    <a-parse :content="xxx"></a-parse>
</template>

<script setup>
import aParse from '@/components/gaoyia-parse/parse.vue';
</script>

```

--------------------------------

### Basic Table Setup

Source: https://uview-plus.jiangruyi.com/components/table2.html

Demonstrates the basic setup for a table with columns and data using Vue's Composition API.

```vue
<script setup>
import { ref } from 'vue';

const currentRowId = ref('');
const tableData = ref([
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 30 }
]);

const columns = ref([
  { title: '姓名', key: 'name' },
  { title: '年龄', key: 'age' }
]);

const handleRowClick = (row) => {
  currentRowId.value = row.id;
  console.log('点击了行:', row);
};
</script>

<template>
  <u-table
    :columns="columns"
    :data="tableData"
    @row-click="handleRowClick"
  ></u-table>
</template>
```

--------------------------------

### Basic Input Usage (Vue Script Setup)

Source: https://uview-plus.jiangruyi.com/components/input.html

Demonstrates the basic setup of the up-input component using Vue's script setup. It shows how to bind the input value and handle the change event.

```vue
<template>
  <up-input
    placeholder="请输入内容"
    border="surround"
    v-model="value"
    @change="change"
  ></up-input>
</template>

<script setup>
import { ref } from 'vue';

const value = ref('');

const change = (e) => {
  console.log('change', e);
};
</script>

```

--------------------------------

### Dropdown Script Setup Example

Source: https://uview-plus.jiangruyi.com/components/dropdown.html

This script uses Vue 3's Composition API to manage dropdown state, options, and event handlers for opening, closing, and changing items.

```javascript
<script setup>
import { ref } from 'vue';

const value1 = ref(1);
const value2 = ref(2);
const uDropdownRef = ref(null);

const options1 = ref([
  {
    label: '默认排序',
    value: 1,
  },
  {
    label: '距离优先',
    value: 2,
  }
]);

const options2 = ref([
  {
    label: '去冰',
    value: 1,
  },
  {
    label: '加冰',
    value: 2,
  },
]);

const open = (index) => {
  // 展开某个下来菜单时，先关闭原来的其他菜单的高亮
  // 同时内部会自动给当前展开项进行高亮
  uDropdownRef.value.highlight();
};

const close = (index) => {
  // 关闭的时候，给当前项加上高亮
  // 当然，您也可以通过监听dropdown-item的@change事件进行处理
  uDropdownRef.value.highlight(index);
};

const change = () => {
  // 更多的细节，如有需要请自行根据业务逻辑进行处理
  // uDropdownRef.value.highlight(xxx);
};
</script>

```

--------------------------------

### Basic Guide Component Usage (Template)

Source: https://uview-plus.jiangruyi.com/components/guide.html

Template structure for the Guide component. Use `v-model:show` to control visibility and `list` to provide the onboarding data.

```html
<template>
  <up-guide
    v-model:show="show"
    :list="list"
    storage-key="demo-up-guide-once"
  />
</template>

```

--------------------------------

### Manual Increment/Decrement (Setup Script)

Source: https://uview-plus.jiangruyi.com/components/lineProgress.html

Control the progress bar's percentage value dynamically by updating the `percentage` ref. This example uses the Composition API with `<script setup>`.

```vue
<template>
	<view style="margin-top: 50px;">
		<up-line-progress :percentage="percentage" />
		<view style="display: flex;margin-top: 100px;">
			<button @click="computedWidth('minus')">减少</button>
			<button @click="computedWidth('plus')">增加</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const percentage = ref(30);

computedWidth = (type) => {
  if (type === 'plus') {
    percentage.value = uni.$u.range(0, 100, percentage.value + 10);
  } else {
    percentage.value = uni.$u.range(0, 100, percentage.value - 10);
  }
};
</script>

```

--------------------------------

### Install uView-plus and Dependencies

Source: https://uview-plus.jiangruyi.com/components/npmSetting.html

Install uView-plus along with Day.js and Clipboard.js. If your HBuilder X project lacks a package.json, initialize it first.

```bash
# If your project is HX created, and the root directory does not have package.json, please execute the following command first:
# npm init -y

# Install
npm install uview-plus
npm install dayjs
npm install clipboard
```

--------------------------------

### GET Request with Parameters and Local Configuration

Source: https://uview-plus.jiangruyi.com/js/http.html

Demonstrates making a GET request, including how to pass parameters and override global configurations locally. Local configurations take precedence.

```javascript
import { http, toast} from '@/uni_modules/uview-plus'
// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
http.get('/user/login', {params: {userName: 'name', password: '123456'}}).then(res => {

}).catch(err => {

})

// 局部修改配置，局部配置优先级高于全局配置
http.get('/user/login', {
    params: {userName: 'name', password: '123456'}, /* 会加在url上 */
    header: {}, /* 会与全局header合并，如有同名属性，局部覆盖全局 */
    dataType: 'json',
    // 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
    custom: {auth: true}, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token
    // #ifndef MP-ALIPAY
    responseType: 'text',
    // #endif
    // #ifdef H5 || APP-PLUS || MP-ALIPAY || MP-WEIXIN
    timeout: 60000, // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
    // #endif
    // #ifdef APP-PLUS
    sslVerify: true, // 验证 ssl 证书 仅5+App安卓端支持（HBuilderX 2.3.3+）
    // #endif
    // #ifdef APP-PLUS
    firstIpv4: false, // DNS解析时优先使用ipv4 仅 App-Android 支持 (HBuilderX 2.8.0+)
    // #endif
    // #ifdef H5
    withCredentials: false, // 跨域请求时是否携带凭证（cookies）仅H5支持（HBuilderX 2.6.15+）
    // #endif
    // 返回当前请求的task, options。请勿在此处修改options。非必填
    getTask: (task, options) => {
         // 相当于设置超时时间500ms
         // setTimeout(() => {
         //   task.abort()
         // }, 500)
    },
    //validateStatus: (statusCode) => { // statusCode 必存在。此处示例为全局默认配置。演示，非必填选项
	//	return statusCode >= 200 && statusCode < 300
	//}
}).then(res => {

}).catch(err => {

})


```

--------------------------------

### SwipeAction Basic Usage Script Setup

Source: https://uview-plus.jiangruyi.com/components/swipeAction.html

This script uses `setup` syntax with `reactive` to define the `show` state and `options1` for the SwipeAction item. Ensure `ref` is imported if used.

```javascript
import { reactive } from 'vue';  
  
const show = ref(false)
// 使用 reactive 创建响应式对象  
const options1 = reactive([{  
    text: '删除'  
}]);  
```

--------------------------------

### Input with Prefix and Suffix Slots (Vue 3 Setup Script)

Source: https://uview-plus.jiangruyi.com/components/input.html

Demonstrates how to use prefix and suffix slots in the u-input component with Vue 3's setup script. This example shows adding 'http://' as a prefix and a verification code button with a countdown as a suffix. Note the conditional rendering for APP-NVUE compatibility.

```vue
<template>
	<view class="u-demo-block">
		<text class="u-demo-block__title">前后插槽</text>
		<view class="u-demo-block__content">
			<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
			<!-- #ifndef APP-NVUE -->
			<up-input placeholder="前置插槽">
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			<up-input placeholder="前置插槽">
			<!-- #endif -->
				<template #prefix>
					<up-text
						text="http://"
						margin="0 3px 0 0"
						type="tips"
					></up-text>
				</template>
			<!-- #ifndef APP-NVUE -->
			</up-input>
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			</up-input>
			<!-- #endif -->
		</view>
		<view
			class="u-demo-block__content"
			style="margin-top: 15px;"
		>
			<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
			<!-- #ifndef APP-NVUE -->
			<up-input placeholder="后置插槽">
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			<up-input placeholder="后置插槽">
			<!-- #endif -->
				<template #suffix>
					<up-code
						ref="uCodeRef"
						@change="codeChange"
						seconds="20"
						changeText="X秒重新获取哈哈哈"
					></up-code>
					<up-button
						@tap="getCode"
						:text="tips"
						type="success"
						size="mini"
					></up-button>
				</template>
			<!-- #ifndef APP-NVUE -->
			</up-input>
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			</up-input>
			<!-- #endif -->
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue';

const tips = ref('');
const value = ref('');
const uCodeRef = ref(null);

watch(value, (newValue, oldValue) => {
  // console.log('v-model', newValue);
});

const codeChange = (text) => {
  tips.value = text;
};

const getCode = () => {
  if (uCodeRef.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: '正在获取验证码',
    });
    setTimeout(() => {
      uni.hideLoading();
      // 这里此提示会被start()方法中的提示覆盖
      uni.$u.toast('验证码已发送');
      // 通知验证码组件内部开始倒计时
      uCodeRef.start();
    }, 2000);
  } else {
    uni.$u.toast('倒计时结束后再发送');
  }
};

const change = (e) => {
  console.log('change', e);
};
</script>

```

--------------------------------

### Responsive Column Count for Grid Layout (Composition API)

Source: https://uview-plus.jiangruyi.com/components/dragsort.html

This example demonstrates responsive column behavior for the grid layout using the Composition API with Vue's `<script setup>`.

```javascript
import { ref, computed } from 'vue';

const responsiveList = ref([
  { id: 1, label: '项目1' },
  { id: 2, label: '项目2' },
  { id: 3, label: '项目3' },
  // ...更多项目
]);

const gridColumns = computed(() => {
  // 根据屏幕宽度动态计算列数
  const screenWidth = uni.getSystemInfoSync().windowWidth;
  if (screenWidth < 375) {
    return 2; // 小屏手机
  } else if (screenWidth < 414) {
    return 3; // 中屏手机
  } else {
    return 4; // 大屏手机/平板
  }
});

const onDragEnd = (list) => {
  console.log('拖拽结束', list);
  responsiveList.value = list;
};

```

--------------------------------

### Manually Importing Action Sheet with Setup Script

Source: https://uview-plus.jiangruyi.com/components/quickstart.html

Demonstrates manual import of the up-action-sheet component using a setup script. This method is an alternative to Easycom.

```vue
<template>
	<up-action-sheet :actions="list" v-model="show"></up-action-sheet>
</template>

<script setup>
import { ref } from 'vue';
import upActionSheet from "uview-plus/components/up-action-sheet/up-action-sheet.vue";

// 定义响应式数据
const list = ref([
	{
		text: '点赞',
		color: 'blue',
		fontSize: 28
	},
	{
		text: '分享'
	},
	{
		text: '评论'
	}
]);

const show = ref(true);
</script>

```

--------------------------------

### Install Additional Dependencies

Source: https://uview-plus.jiangruyi.com/components/downloadSetting.html

Install the 'dayjs' and 'clipboard' npm packages, which may be required by certain uView-plus components or functionalities.

```bash
npm i dayjs
npm i clipboard

```

--------------------------------

### Basic Usage with Vue 3 Setup Script

Source: https://uview-plus.jiangruyi.com/components/code.html

Demonstrates the basic usage of the up-code component with Vue 3's setup script. It shows how to handle countdowns, display prompts, and prevent multiple requests during the countdown.

```vue
<template>
	<view class="wrap">
		<up-toast ref="uToastRef"></up-toast>
		<up-code :seconds="seconds" @end="end" @start="start" ref="uCodeRef" 
		@change="codeChange"></up-code>
		<up-button @tap="getCode">{{tips}}</up-button>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const tips = ref('');
const seconds = ref(10);
const uCodeRef = ref(null);

const codeChange = (text) => {
  tips.value = text;
};

const getCode = () => {
  if (uCodeRef.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: '正在获取验证码',
    });
    setTimeout(() => {
      uni.hideLoading();
      // 这里此提示会被start()方法中的提示覆盖
      uni.$u.toast('验证码已发送');
      // 通知验证码组件内部开始倒计时
      uCodeRef.start();
    }, 2000);
  } else {
    uni.$u.toast('倒计时结束后再发送');
  }
};

const end = () => {
  uni.$u.toast('倒计时结束');
};

const start = () => {
  uni.$u.toast('倒计时开始');
};
</script>

<style lang="scss">
	.wrap {
		padding: 24rpx;
	}
</style>

```

--------------------------------

### GET Request

Source: https://uview-plus.jiangruyi.com/js/http.html

Illustrates how to perform a GET request, emphasizing that all parameters and configuration options are passed as the second argument. It also shows how to override global configurations with local ones.

```APIDOC
## GET Request

```javascript
import { http, toast} from '@/uni_modules/uview-plus'

// Basic usage: parameters and configuration are in the second argument
http.get('/user/login', {params: {userName: 'name', password: '123456'}}).then(res => {
    // Handle success
}).catch(err => {
    // Handle error
})

// Local configuration overrides global configuration
http.get('/user/login', {
    params: {userName: 'name', password: '123456'}, /* Appended to the URL */
    header: {}, /* Merged with global header, local overrides global */
    dataType: 'json',
    custom: {auth: true}, // Custom parameters, usable in interceptors
    responseType: 'text', // Platform-specific
    timeout: 60000, // Platform-specific
    sslVerify: true, // Platform-specific
    firstIpv4: false, // Platform-specific
    withCredentials: false, // Platform-specific
    getTask: (task, options) => { /* Callback for task and options */ },
    validateStatus: (statusCode) => { /* Custom status code validation */ }
}).then(res => {
    // Handle success
}).catch(err => {
    // Handle error
})
```
```

--------------------------------

### Install uView Plus via NPM

Source: https://uview-plus.jiangruyi.com/components/install.html

Install uView Plus in your project's root directory using npm. Ensure you have a package.json file; if not, run 'npm init -y' first.

```bash
// If your root directory does not have a package.json file, please run the following command first:
// npm init -y

npm install uview-plus

// Update
// npm update uview-plus
```

--------------------------------

### Using Action Sheet with Setup Script

Source: https://uview-plus.jiangruyi.com/components/quickstart.html

Demonstrates how to use the up-action-sheet component with Vue 3's setup script. The actions are defined as a ref.

```vue
<template>
  <up-action-sheet :actions="list" v-model:show="show"></up-action-sheet>
</template>

<script setup>
import { ref } from 'vue';

const list = ref([
  {
    text: '点赞',
    color: 'blue',
    fontSize: 28
  },
  {
    text: '分享'
  },
  {
    text: '评论'
  }
]);

const show = ref(true);
</script>

```

--------------------------------

### CateTab Data Setup with Options API

Source: https://uview-plus.jiangruyi.com/components/cateTab.html

Initializes the component data using Vue's Options API. The `list` property holds the data structure for the CateTab component, similar to the Composition API example.

```javascript
export default {
	data() {
		return {
			list: [
                { title: '选项一',  children: [
                    {title: '水煮肉片', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88}
                    ]
                },
                { title: '选项一',  children: [
                    {title: '酸菜鱼', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 99}
                    ]
                },
                { title: '选项一',  children: [
                    {title: '水煮肉片', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88}
                    ]
                },
                { title: '选项一',  children: [
                    {title: '酸菜鱼', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 99}
                    ]
                },
                ]
		};
	},
	methods: {
	}
};

```

--------------------------------

### Custom Grid Layout for Icon Applications (Composition API)

Source: https://uview-plus.jiangruyi.com/components/dragsort.html

This example demonstrates a custom grid layout for icon applications using the Composition API with Vue's `<script setup>`.

```javascript
import { ref } from 'vue';

const appList = ref([
  { id: 1, label: '电话', icon: '📞' },
  { id: 2, label: '短信', icon: '💬' },
  { id: 3, label: '相机', icon: '📷' },
  { id: 4, label: '设置', icon: '⚙️' },
  { id: 5, label: '音乐', icon: '🎵' },
  { id: 6, label: '视频', icon: '🎬' }
]);

const onDragEnd = (list) => {
  console.log('拖拽结束', list);
  appList.value = list;
};

```

```css
.app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

.app-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.app-label {
  font-size: 12px;
}

```

--------------------------------

### CateTab Data Setup with Composition API

Source: https://uview-plus.jiangruyi.com/components/cateTab.html

Initializes the tabList data using Vue's Composition API with `ref`. This example demonstrates how to structure the data for the CateTab component, including nested children for each tab item.

```javascript
import { ref, onMounted } from 'vue';  
  
// 响应式数据  
const tabList = ref([
  { title: '选项一',  children: [
    {title: '水煮肉片', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88}
    ]
  },
  { title: '选项一',  children: [
    {title: '酸菜鱼', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 99}
    ]
  },
  { title: '选项一',  children: [
    {title: '水煮肉片', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 88}
    ]
  },
  { title: '选项一',  children: [
    {title: '酸菜鱼', cover: 'https://s3.bmp.ovh/imgs/2024/12/16/35bc6d28ab1c8bc7.png', price: 99}
    ]
  },
]);
```

--------------------------------

### Install Sass and Sass-loader

Source: https://uview-plus.jiangruyi.com/components/npmSetting.html

Install the necessary Sass packages for uView-plus. Ensure you use specific versions for compatibility.

```bash
npm i sass@1.63.2 -D

npm i sass-loader@10.4.1 -D
```

--------------------------------

### CodeInput Change and Finish Events (Script Setup)

Source: https://uview-plus.jiangruyi.com/components/codeInput.html

Provides the JavaScript logic for the `change` and `finish` event handlers using the `<script setup>` syntax. Logs the input value to the console.

```javascript
<script setup>
// 定义 change 方法  
const change = (e) => {
  console.log('内容改变，当前值为：' + e);
};

// 定义 finish 方法  
const finish = (e) => {
  console.log('输入结束，当前值为：' + e);
};
</script>
```

--------------------------------

### Signature Component Script Setup

Source: https://uview-plus.jiangruyi.com/components/signature.html

Provides the script setup logic for handling signature capture, including state management for signature images and event handlers for confirmation and errors. This uses the Composition API.

```javascript
import { ref } from 'vue';

const signature1 = ref(null);
const signature2 = ref(null);
const signatureImage1 = ref('');
const signatureImage2 = ref('');

const onConfirm1 = (tempFilePath) => {
  signatureImage1.value = tempFilePath;
  console.log('签名图片路径1:', tempFilePath);
};

const onError1 = (err) => {
  console.error('签名导出错误1:', err);
  uni.showToast({
    title: '签名导出失败',
    icon: 'none'
  });
};

const clearSignature1 = () => {
  signatureImage1.value = '';
  signature1.value.clear();
};

const onConfirm2 = (tempFilePath) => {
  signatureImage2.value = tempFilePath;
  console.log('签名图片路径2:', tempFilePath);
};

const onError2 = (err) => {
  console.error('签名导出错误2:', err);
  uni.showToast({
    title: '签名导出失败',
    icon: 'none'
  });
};

const clearSignature2 = () => {
  signatureImage2.value = '';
  signature2.value.clear();
};

```

--------------------------------

### Basic Guide Component Usage (Vue Options API)

Source: https://uview-plus.jiangruyi.com/components/guide.html

Vue 2 Options API for the Guide component, managing component visibility and onboarding data within the component's data properties.

```javascript
export default {
  data() {
    return {
      show: true,
      list: [
        {
          image: '/static/uview/common/logo.png',
          title: '欢迎使用 uview-plus',
          desc: '一套跨端可复用的高质量组件库。'
        },
        {
          image: '/static/uview/common/gray-logo.png',
          title: '引导页支持多页滑动',
          desc: '可配置跳过、下一步和立即体验。'
        },
        {
          image: '/static/uview/common/logo.jpg',
          title: '只显示一次',
          desc: '默认内置本地存储记忆能力。'
        }
      ]
    }
  }
}

```

--------------------------------

### Guide Component: Resetting 'Show Once' (Vue Script Setup)

Source: https://uview-plus.jiangruyi.com/components/guide.html

Vue 3 script setup for resetting the Guide component's 'show once' flag. It uses a ref to access the component's methods.

```javascript
import { ref } from 'vue'

const show = ref(false)
const guideRef = ref(null)

function resetGuide() {
  guideRef.value?.reset?.()
  show.value = true
}

```

--------------------------------

### Basic GoodsSku Setup (Vue)

Source: https://uview-plus.jiangruyi.com/components/goodsSku.html

Sets up the GoodsSku component with basic product information, SKU tree structure, and SKU list. This is the foundational configuration for the component.

```javascript
import { ref } from 'vue';

// 商品信息
const goodsInfo = ref({
	image: 'https://picsum.photos/200/200',
	price: 99.00,
	stock: 100
});

// SKU树形结构
const skuTree = ref([
	{
		label: '颜色',
		name: 'color',
		children: [
			{ id: 1, name: '红色' },
			{ id: 2, name: '蓝色' },
			{ id: 3, name: '黑色' }
		]
	},
	{
		label: '尺寸',
		name: 'size',
		children: [
			{ id: 1, name: 'S' },
			{ id: 2, name: 'M' },
			{ id: 3, name: 'L' },
			{ id: 4, name: 'XL' }
		]
	}
]);

// SKU列表
const skuList = ref([
	{
		id: 1,
		color: 1,
		size: 1,
		price: 99.00,
		stock: 50
	},
	{
		id: 2,
		color: 1,
		size: 2,
		price: 99.00,
		stock: 40
	},
	{
		id: 3,
		color: 2,
		size: 1,
		price: 109.00,
		stock: 30
	},
	{
		id: 4,
		color: 2,
		size: 3,
		price: 109.00,
		stock: 20
	},
	{
		id: 5,
		color: 3,
		size: 4,
		price: 89.00,
		stock: 60
	}
]);

function confirmSku(e) {
	uni.showToast({
		title: `选择了: ${e.selectedText}, 数量: ${e.num}`,
		icon: 'none'
	});
}

```

--------------------------------

### Debounce Usage in Vue.js (Script Setup)

Source: https://uview-plus.jiangruyi.com/js/debounce.html

Shows how to implement the debounce function from '@/uni_modules/uview-plus' in a Vue.js script setup. This example demonstrates calling debounce directly in JavaScript.

```vue
<template>
    <view class="">
        <view class="debounce" @tap="debounce(btnAClick, 500)">
            露从今夜白
        </view>
        <view class="debounce" @tap="btnBClick">
            月是故乡明
        </view>
    </view>
</template>

<script setup>
import { debounce } from '@/uni_modules/uview-plus';

const btnAClick = () => {
    console.log('btnClick');
};

const btnBClick = () => {
    // 此处用法为在js中调用，需要写debounce()
    debounce(toNext, 500);
};

const toNext = () => {
    console.log('btnBClick');
};
</script>

<style lang="scss">
    .debounce {
        margin-top: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100rpx;
        border: 1px solid $up-type-primary;
    }
</style>

```

--------------------------------

### Throttle Usage in Vue.js (Script Setup)

Source: https://uview-plus.jiangruyi.com/js/debounce.html

Demonstrates how to use the throttle function imported from '@/uni_modules/uview-plus' within a Vue.js script setup. This example shows calling throttle directly in JavaScript.

```vue
<template>
    <view class="">
        <view class="throttle" @tap="throttle(btnAClick, 500)">
            露从今夜白
        </view>
        <view class="throttle" @tap="btnBClick">
            月是故乡明
        </view>
    </view>
</template>

<script setup>
import { throttle } from '@/uni_modules/uview-plus';

const btnAClick = () => {
    console.log('btnClick');
};

const btnBClick = () => {
    // 此处用法为在js中调用，需要写throttle()
    throttle(toNext, 500);
};

const toNext = () => {
    console.log('btnBClick');
};
</script>

<style lang="scss">
    .throttle {
        margin-top: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100rpx;
        border: 1px solid $up-type-primary;
    }
</style>

```

--------------------------------

### Basic GoodsSku Setup (Vue Options API)

Source: https://uview-plus.jiangruyi.com/components/goodsSku.html

Sets up the GoodsSku component using Vue's Options API with product information, SKU tree, and SKU list. This configuration is an alternative to the Composition API.

```javascript
export default {
	data() {
		return {
			// 商品信息
			goodsInfo: {
				image: 'https://picsum.photos/200/200',
				price: 99.00,
				stock: 100
			},
			// SKU树形结构
			skuTree: [
				{
					label: '颜色',
					name: 'color',
					children: [
						{ id: 1, name: '红色' },
						{ id: 2, name: '蓝色' },
						{ id: 3, name: '黑色' }
					]
				},
				{
					label: '尺寸',
					name: 'size',
					children: [
						{ id: 1, name: 'S' },
						{ id: 2, name: 'M' },
						{ id: 3, name: 'L' },
						{ id: 4, name: 'XL' }
					]
				}
			],
			// SKU列表
			skuList: [
				{
					id: 1,
					color: 1,
				size: 1,
				price: 99.00,
				stock: 50
				},
				{
				id: 2,
				color: 1,
				size: 2,
				price: 99.00,
				stock: 40
				},
				{
				id: 3,
				color: 2,
				size: 1,
				price: 109.00,
				stock: 30
				},
				{
				id: 4,
				color: 2,
				size: 3,
				price: 109.00,
				stock: 20
				},
				{
				id: 5,
				color: 3,
				size: 4,
				price: 89.00,
				stock: 60
				}
			]
		};
	},
	methods: {
		confirmSku(e) {
			uni.showToast({
				title: `选择了: ${e.selectedText}, 数量: ${e.num}`,
				icon: 'none'
			});
		}
	}
};

```

--------------------------------

### Get Current Page Path

Source: https://uview-plus.jiangruyi.com/js/fastUse.html

Retrieves the path of the current page. The returned path starts with a '/'.

```javascript
import { page } from '@/uni_modules/uview-plus';
import { onLoad } from '@dcloudio/uni-app';

onLoad(() => {
  // 返回类似/pages/example/components的结果
  console.log(page());
});

```

--------------------------------

### Datetime Picker with Min/Max Dates (Vue Script Setup)

Source: https://uview-plus.jiangruyi.com/components/datetimePicker.html

Use the `minDate` and `maxDate` props to set the selectable date range. These props accept timestamps in milliseconds. This example uses Vue's script setup syntax.

```vue
<template>
    <view>
        <up-datetime-picker
            :show="show"
            v-model="value1"
            :minDate="1587524800000"
            :maxDate="1786778555000"
            mode="datetime"
        ></up-datetime-picker>
        <up-button @click="show = true">打开</up-button>
    </view>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(false);
const value1 = ref(Date.now());
</script>

```

--------------------------------

### 基本使用 - Script Setup

Source: https://uview-plus.jiangruyi.com/components/notify.html

使用 ref 创建响应式数据来控制 Notify 组件的显示状态。

```javascript
import { ref } from 'vue';

// 创建响应式数据
const show = ref(true);
```

--------------------------------

### Basic Usage

Source: https://uview-plus.jiangruyi.com/components/keyboard.html

Demonstrates how to use the basic keyboard component, controlling its visibility with the `show` prop and setting the keyboard mode.

```APIDOC
## Basic Usage

This example shows how to integrate the `up-keyboard` component into your application. The `mode` prop defines the keyboard type (e.g., 'car', 'number', 'card'), and the `show` prop, bound to a boolean variable, controls the keyboard's visibility.

### Component Usage

```vue
<template>
	<view>
		<up-keyboard ref="uKeyboard" mode="car" :show="show"></up-keyboard>
		<up-button @click="show = true">打开</up-button>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(false);
</script>
```

### Vue 2 Example

```vue
<template>
	<view>
		<up-keyboard ref="uKeyboard" mode="car" :show="show"></up-keyboard>
		<up-button @click="show = true">打开</up-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false
			}
		}
	}
</script>
```
```

--------------------------------

### Disable Dragging for Specific Items (Composition API)

Source: https://uview-plus.jiangruyi.com/components/dragsort.html

This example demonstrates disabling specific items using the Composition API with Vue's `<script setup>`.

```javascript
import { ref } from 'vue';

const listWithFixedItems = ref([
  { id: 1, label: '可拖拽项目1', draggable: true },
  { id: 2, label: '固定项目', draggable: false },
  { id: 3, label: '可拖拽项目2', draggable: true },
  { id: 4, label: '可拖拽项目3', draggable: true }
]);

const onDragEnd = (list) => {
  console.log('拖拽结束', list);
  listWithFixedItems.value = list;
};

```

--------------------------------

### File Preview Configuration

Source: https://uview-plus.jiangruyi.com/components/upload.html

Enables full-image preview for uploaded files by setting the `previewFullImage` prop to `true`. Assumes basic usage setup from the 'Basic Usage' example.

```vue
<up-upload
	:fileList="fileList3"
	@afterRead="afterRead"
	@delete="deletePic"
	name="3"
	multiple
	:maxCount="10"
	:previewFullImage="true"
></up-upload>
<!-- data 方法请参考 基本用法 -->
data(){
	return{
		fileList3: [{
			type: 'image',	// 文件类型，image/video/file
			url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
		}],
	}
}


```

--------------------------------

### Video Upload Configuration

Source: https://uview-plus.jiangruyi.com/components/upload.html

Configures the upload component to handle video files by setting the `accept` attribute to 'video'. Assumes basic usage setup from the 'Basic Usage' example.

```vue
<up-upload
	:fileList="fileList2"
	@afterRead="afterRead"
	@delete="deletePic"
	name="2"
	multiple
	:maxCount="10"
	accept="video"
></up-upload>
<!-- data 方法请参考 基本用法 -->
data(){
	return{
		fileList2: [],
	}
}


```
Tokens:
Raw