Open zeplios opened 2 years ago
环境&版本:
{ "name": "sliter-test", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build", "preview": "vite preview" }, "dependencies": { "vue": "^3.2.37" }, "devDependencies": { "@vitejs/plugin-vue": "^3.0.0", "typescript": "^4.6.4", "vite": "^3.0.0", "vue-concise-slider": "^4.2.5", "vue-tsc": "^0.38.4" } }
使用 demo 的代码 运行时报错:
代码搭建流程:
// 创建项目 npm init vite@latest sliter-test -- --template vue-ts cd sliter-test npm install npm i vue-concise-slider -D
修改 App.vue
<script setup lang="ts"> import { reactive } from 'vue' import { slider, slideritem } from 'vue-concise-slider' const d = reactive({ someList: [ { html: 'slide1', style: { 'background': '#1bbc9b' } }, { html: 'slide2', style: { 'background': '#4bbfc3' } }, { html: 'slide3', style: { 'background': '#7baabe' } } ], options: { currentPage: 0 } }) </script> <template> <div style="width:100%;margin:20px auto;height:400px"> <!-- Using the slider component --> <slider ref="slider" :options="d.options"> <!-- slideritem wrapped package with the components you need --> <slideritem v-for="(item,index) in d.someList" :key="index" :style="item.style">{{item.html}}</slideritem> <!-- Customizable loading --> <div slot="loading">loading...</div> </slider> </div> </template> <style scoped> </style>
还不支持vue3
环境&版本:
使用 demo 的代码 运行时报错:
代码搭建流程:
修改 App.vue