Grace.js 元素选择函数基于 uni/wx.createSelectorQuery() 进行封装,使您的元素选择工作更加便利。
注意 : select 和 selectAll 均不支持 nuve,nvue 请使用 dom 对象获取元素,参考示例 :
http://grace.hcoder.net/manual/info/805-2.html [ 请切换到 nvue 版本 ]
函数功能 : 获取单个元素
函数参数 : dom 选择器 ( id选择器、class选择器等 )
函数功能 : 获全部元素
函数参数 : dom 选择器 ( id选择器、class选择器等 )
元素的信息结构
{ id:"demo1", // 如果设置 width:167, height:100, left:12 right:179 top:15, bottom:10, dataset:Object // 如果设置 }
<template> <gracePage :customHeader="false"> <!-- 页面主体 --> <view slot="gBody" class="grace-body"> <view class="grace-space-between grace-margin-top"> <view id="demo1" class="demo1 grace-bg-blue grace-text-center grace-border-radius-small">Demo1</view> <view class="demo2 grace-bg-green grace-text-center grace-border-radius-small">Demo2</view> </view> <view class="grace-space-between grace-margin-top"> <view class="demo3 grace-bg-blue grace-text-center grace-border-radius-small" data-id="demo3-1">Demo3-1</view> <view class="demo3 grace-bg-green grace-text-center grace-border-radius-small" data-id="demo3-2">Demo3-2</view> <view class="demo3 grace-bg-red grace-text-center grace-border-radius-small" data-id="demo3-3">Demo3-3</view> </view> </view> </gracePage> </template> <script> import gracePage from "../../graceUI/components/gracePage.vue"; var graceJS = require('@/Grace.JS/grace.js'); export default { data(){ return {} }, onReady : function(){ // 获取 demo1 graceJS.select('#demo1', (res)=>{ console.log('demo1 : ',res); }); // 获取 demo2 graceJS.select('.demo2', (res)=>{ console.log('demo2 : ', res); }); // 获取 demo3 多个元素 graceJS.selectAll('.demo3', (res)=>{ console.log('demo3 : ', res); }); }, components:{ gracePage }, methods:{} } </script> <style> .demo1{width:335rpx; line-height:200rpx;} .demo2{width:335rpx; line-height:160rpx; height:160rpx;} .demo3{width:220rpx; line-height:120rpx; height:120rpx;} </style>