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>