老师，如果提取use方法如何传递$event

Question

这样的函数如果写在use函数里面如何接收参数，获取传递的参数

@touchstart="handleTouchstart($event)"

老师帮忙解答一下

Answer 1

Dell 2021-04-24 19:58:20

handleTouchstart($event, 123, 456)

Answer 2

提问者 目訫 2021-04-23 19:38:47

<template>
  <div class="report">
    <div class="report_header"><div class="report_header_back iconfont" @click="handleBackClick">&#xe65e;</div>购物趋势图</div>
    <div class="report_content">
      <div class="report_content_title">购物统计报告</div>
      <div class="report_content_index">
        <span class="arrow-up">
          <svg data-v-666af9e5="" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="svg-inline--fa fa-angle-up fa-w-10"><path data-v-666af9e5="" fill="currentColor" d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"></path></svg>
        </span>
        <span class="percentage">34<span>%</span></span>
        <span class="text">+14,400</span>
      </div>
      <div class="report_content_chart" id="chart" />
      <div class="report_content_circle">
        <div
          :class="['circle', selected === index ? 'active' : '']"
          v-for="(item ,index) of circles"
          :key="index"
          @click="handleClickCircle(index)" />
      </div>
      <div class="report_content_bottom">购物趋势</div>
    </div>
    <div class="report_footer">
      <div class="report_footer_content">
        <div class="left">
          <div class="left_title">购物额</div>
          <div class="left_sub_title">累计购物额</div>
        </div>
        <div class="right">
          <small>&yen;</small> 300,254.00
        </div>
      </div>
      <div class="report_footer_progress">
        <div class="progress_background">
          <div class="progress_current" :style="{ width: `${progress * 100}%` }"></div>
        </div>
      </div>
      <div class="report_footer_text">
        <div>购物增长率</div>
        <div>34%</div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import * as Echarts from 'echarts'

const useChangeShowItem = (selected, getChart) => {
  const handleClickCircle = (index) => {
    selected.value = index
    getChart()
  }
  const changeShowItem = (index) => {
    handleClickCircle(index)
  }
  return { handleClickCircle, changeShowItem }
}

export default {
  name: 'Report',
  setup () {
    const router = useRouter()
    const circles = Array(3).fill('')
    const selected = ref(0)
    const timer = ref(null)
    const progress = ref(0.35)

    const getChart = () => {
      // 获取数据源
      const mockData = []
      for (let iii = 0; iii < 10; iii++) {
        mockData.push(Math.floor(Math.random() * 100 + 200))
      }
      // 获取Chart => DOM
      const chartDOM = document.getElementById('chart')
      // 初始化echarts对象
      const Chart = Echarts.init(chartDOM)
      // 生成渲染参数
      const options = {
        xAxis: {
          type: 'category', // 坐标轴类型
          show: false // 坐标轴显示
        },
        yAxis: {
          min: 0, // 最小值
          max: 350, // 最大值
          show: false
        },
        series: [{
          data: mockData,
          type: 'line',
          smooth: true, // 平滑
          areaStyle: { // 区域颜色
            color: 'rgba(75, 193, 252, .5)'
          },
          lineStyle: { // 线的颜色2
            width: 3,
            color: 'rgba(75, 193, 252, 1)'
          },
          itemStyle: { // 点样式
            color: 'rgba(75, 193, 252, 1)'
          },
          symbolSize: 8 // 点大小
        }],
        grid: { // 设置负数可以扩张延伸
          top: 0,
          bottom: 0,
          left: -30,
          right: -30
        },
        tooltip: {
          trigger: 'axis', // 如何触发
          axisPointer: { // tooltip类型
            type: 'cross',
            label: {
              backgroundColor: '#6a7985' // tooltip触发线背景颜色
            }
          }
        }
      }
      // 渲染图表
      Chart.setOption(options)
    }

    const { handleClickCircle, changeShowItem } = useChangeShowItem(selected, getChart)

    onMounted(() => {
      getChart()
      timer.value = setInterval(() => {
        changeShowItem(++selected.value > 2 ? 0 : selected.value)
      }, 3000)
    })
    onUnmounted(() => {
      if (timer.value) clearInterval(timer.value)
    })
    const handleBackClick = () => {
      router.back()
    }
    return { handleBackClick, circles, selected, progress, handleClickCircle }
  }
}
</script>

Answer 3

提问者 目訫 2021-04-22 21:19:18

<div
  class="icons__item"
  :style="{ top: `${index <= 4 ? 36 : 111}px`, left: leftPosition(index) }"
  v-for="(item, index) of homeIconsList"
  :key="item.desc"
  @touchstart="handleTouchstart($event)"
  @touchmove="handleTouchMove($event, index)"
  @touchend="handleTouchend($event, index)"
>
  <img class="icons__item__img" :src="`http://www.dell-lee.com/imgs/vue3/${ item.imgName }.png`" />
  <p class="icons__item__desc">{{ item.desc }}</p>
</div>
      
const useMethods = (homeIconsList, e) => {
  const handleTouchstart = (e) => {
    const element = e.targetTouches[0]
    e.currentTarget.style.opacity = 0.5
    client.x = element.clientX // 鼠标落点初始位置
    client.y = element.clientY // 鼠标落点初始位置
    client.left = element.target.getBoundingClientRect().left // getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
    client.top = element.target.getBoundingClientRect().top
  }
  const handleTouchMove = (e, index) => {
    const element = e.targetTouches[0]
    // 当前鼠标落点加上元素自身左边距上边距
    const left = element.clientX - 35
    const top = element.clientY - 270
    // 移动当前元素
    e.currentTarget.style.left = `${left}px`
    e.currentTarget.style.top = `${top}px`
  }
  const handleTouchend = (e, index) => {
    const end = {
      x: e.changedTouches[0].clientX,
      y: e.changedTouches[0].clientY
    }
    e.currentTarget.style.opacity = 1
    const width = document.getElementsByClassName('icons')[0].offsetWidth
    const positionX = parseInt(end.x / width * 10)
    let positionY = 1
    if (index <= 4) {
      if (end.y - client.y < 30) {
        positionY = 1
      } else {
        positionY = 2
      }
    } else if (index > 4) {
      if (end.y - client.y < 0) {
        positionY = 1
      } else {
        positionY = 2
      }
    }
    let position = 0
    if (positionX <= 1) {
      if (positionY === 1) {
        position = 0
      } else {
        position = 5
      }
    } else if (positionX <= 3) {
      if (positionY === 1) {
        position = 1
      } else {
        position = 6
      }
    } else if (positionX <= 5) {
      if (positionY === 1) {
        position = 2
      } else {
        position = 7
      }
    } else if (positionX <= 7) {
      if (positionY === 1) {
        position = 3
      } else {
        position = 8
      }
    } else if (positionX <= 9) {
      if (positionY === 1) {
        position = 4
      } else {
        position = 9
      }
    }
    const item = homeIconsList.value[index]
    homeIconsList.value.splice(index, 1)
    homeIconsList.value.splice(position, 0, item)
    store.commit('changeHomeIconsList', homeIconsList.value)
  }
  return { handleTouchstart, handleTouchMove, handleTouchend }
}

老师，应该如何拿到$event

Answer 4

提问者 目訫 2021-04-03 15:48:29

<template>
  <div
    class="icons__item"
    :style="{ top: `${index <= 4 ? 36 : 111}px`, left: leftPosition(index) }"
    v-for="(item, index) of homeIconsList"
    :key="item.desc"
    @touchstart="handleTouchstart($event)"
    @touchend="handleTouchend($event, index)"
  >
    <img class="icons__item__img" :src="`http://www.dell-lee.com/imgs/vue3/${ item.imgName }.png`" />
    <p class="icons__item__desc">{{ item.desc }}</p>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'User',
  components: { Docker },
  setup () {
    const store = useStore()
    const client = reactive({
      x: 0,
      y: 0
    })
    const { homeIconsList } = toRefs(store.state)
    const { handleLogoutClick } = useLogoutEffect()
    const handleTouchstart = (e) => {
      const element = e.targetTouches[0]
      client.x = element.clientX
      client.y = element.clientY
    }
    return { handleLogoutClick, handleTouchstart }
  }
}
</script>

<style scoped>
</style>

Answer 5

Dell 2021-04-03 14:15:02

一样的呀，可以用第二个，第三个 ...... 参数传递

• 提问者 目訫 #1

  $event如何穿到use函数中呢，老师

• Dell 回复 提问者 目訫 #2

  你给我一段长一点的代码看一下

• 提问者 目訫 回复 Dell #3

  （代码在我的那条回复里面可以看到）
  老师，代码中handleTouchstart方法需要$event参数，现在方法是写在setup函数中，如果写在use方法中，应该如何获取$event呢

点开查看后面6条评论