warpcgd / vue-concise-slider

vue-concise-slider,A simple vue sliding component
https://warpcgd.github.io/vue-concise-slider/#/
919 stars 185 forks source link

Cannot read properties of undefined (reading '_c') #161

Open zeplios opened 2 years ago

zeplios commented 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 的代码 运行时报错:

image

代码搭建流程:

// 创建项目
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>
warpcgd commented 2 years ago

还不支持vue3