提交 46e6a1b2 编写于 作者: DCloud-yyl's avatar DCloud-yyl

调整INode为Element

上级 46a58a16
...@@ -35,8 +35,8 @@ ...@@ -35,8 +35,8 @@
return { return {
height: 0, height: 0,
is_open: this.open as boolean, is_open: this.open as boolean,
boxNode: null as INode | null, boxNode: null as Element | null,
contentNode: null as INode | null, contentNode: null as Element | null,
}; };
}, },
watch: { watch: {
...@@ -51,8 +51,8 @@ ...@@ -51,8 +51,8 @@
$dispatch(this, 'UniCollapse', 'init', this) $dispatch(this, 'UniCollapse', 'init', this)
}, },
mounted() { mounted() {
this.boxNode = this.$refs['boxRef'] as INode; this.boxNode = this.$refs['boxRef'] as Element;
this.contentNode = this.$refs['contentRef'] as INode; this.contentNode = this.$refs['contentRef'] as Element;
// this.openCollapse(this.open) // this.openCollapse(this.open)
}, },
methods: { methods: {
......
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
methods: { methods: {
changeZIndex(zIndex : number) { changeZIndex(zIndex : number) {
this.zIndex = 20; this.zIndex = 20;
(this.$refs['view'] as INode).style.setProperty('z-index', zIndex); (this.$refs['view'] as Element).style.setProperty('z-index', zIndex);
} }
} }
} }
......
...@@ -69,7 +69,7 @@ export default { ...@@ -69,7 +69,7 @@ export default {
}, },
methods: { methods: {
validateGeneralAttributes() { validateGeneralAttributes() {
const generalTarget = this.$refs.get('general-target') as INode const generalTarget = this.$refs.get('general-target') as Element
const generalId = generalTarget.getAttribute('id') const generalId = generalTarget.getAttribute('id')
if (generalId != this.generalId) { if (generalId != this.generalId) {
this.validateGeneralAttrText = '基础属性 id 验证失败' this.validateGeneralAttrText = '基础属性 id 验证失败'
...@@ -98,7 +98,7 @@ export default { ...@@ -98,7 +98,7 @@ export default {
this.validateGeneralAttrText = '基础属性验证成功' this.validateGeneralAttrText = '基础属性验证成功'
}, },
changeHeight(){ changeHeight(){
const generalTarget = this.$refs['general-target'] as INode const generalTarget = this.$refs['general-target'] as Element
generalTarget.style.setProperty('height', '200px') generalTarget.style.setProperty('height', '200px')
} }
}, },
......
...@@ -233,11 +233,11 @@ ...@@ -233,11 +233,11 @@
}, },
methods: { methods: {
setCursor: function (cursor : number) { setCursor: function (cursor : number) {
(this.$refs['input'] as INode).focus(); (this.$refs['input'] as Element).focus();
this.cursor = cursor; this.cursor = cursor;
}, },
setSelection: function (selectionStart : number, selectionEnd : number) { setSelection: function (selectionStart : number, selectionEnd : number) {
(this.$refs['input2'] as INode).focus(); (this.$refs['input2'] as Element).focus();
this.selectionStart = selectionStart; this.selectionStart = selectionStart;
this.selectionEnd = selectionEnd; this.selectionEnd = selectionEnd;
}, },
......
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
}, },
methods: { methods: {
drawText() { drawText() {
let node = (this.$refs['draw-text-view'] as INode) let node = (this.$refs['draw-text-view'] as Element)
let ctx = node.getDrawableContext() let ctx = node.getDrawableContext()
let width = node.getBoundingClientRect().width let width = node.getBoundingClientRect().width
ctx!!.reset() ctx!!.reset()
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
ctx!!.update() ctx!!.update()
}, },
drawLines() { drawLines() {
let ctx = (this.$refs['draw-line-view'] as INode).getDrawableContext() let ctx = (this.$refs['draw-line-view'] as Element).getDrawableContext()
ctx!!.reset() ctx!!.reset()
ctx!!.lineWidth = 10; ctx!!.lineWidth = 10;
...@@ -127,7 +127,7 @@ ...@@ -127,7 +127,7 @@
y += 15; y += 15;
}, },
drawCircles() { drawCircles() {
let ctx = (this.$refs['draw-circle-view'] as INode).getDrawableContext() let ctx = (this.$refs['draw-circle-view'] as Element).getDrawableContext()
ctx!!.reset() ctx!!.reset()
// Draw shapes // Draw shapes
for (var i = 0; i < 4; i++) { for (var i = 0; i < 4; i++) {
...@@ -153,7 +153,7 @@ ...@@ -153,7 +153,7 @@
}, },
drawStar() { drawStar() {
let ctx = (this.$refs['draw-dash-line'] as INode).getDrawableContext() let ctx = (this.$refs['draw-dash-line'] as Element).getDrawableContext()
ctx!!.reset() ctx!!.reset()
ctx!!.beginPath(); ctx!!.beginPath();
var horn = 5; // 画5个角 var horn = 5; // 画5个角
...@@ -224,7 +224,7 @@ ...@@ -224,7 +224,7 @@
return result return result
}, },
drawhouse() { drawhouse() {
let ctx = (this.$refs['draw-house'] as INode).getDrawableContext() let ctx = (this.$refs['draw-house'] as Element).getDrawableContext()
ctx!!.reset() ctx!!.reset()
ctx!!.lineWidth = 10; ctx!!.lineWidth = 10;
...@@ -244,7 +244,7 @@ ...@@ -244,7 +244,7 @@
ctx!!.update() ctx!!.update()
}, },
drawPoint() { drawPoint() {
let ctx = (this.$refs['draw-style'] as INode).getDrawableContext() let ctx = (this.$refs['draw-style'] as Element).getDrawableContext()
ctx!!.reset() ctx!!.reset()
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) { for (let j = 0; j < 6; j++) {
...@@ -263,7 +263,7 @@ ...@@ -263,7 +263,7 @@
ctx!!.update() ctx!!.update()
}, },
drawRect() { drawRect() {
let ctx = (this.$refs['draw-odd'] as INode).getDrawableContext() let ctx = (this.$refs['draw-odd'] as Element).getDrawableContext()
ctx!!.reset() ctx!!.reset()
// Create path // Create path
ctx!!.moveTo(30, 90); ctx!!.moveTo(30, 90);
......
...@@ -490,10 +490,10 @@ ...@@ -490,10 +490,10 @@
}) })
}, },
showPop: function () { showPop: function () {
(this.$refs["pop"] as INode).style.setProperty("display", "flex") (this.$refs["pop"] as Element).style.setProperty("display", "flex")
}, },
hidePop: function () { hidePop: function () {
(this.$refs["pop"] as INode).style.setProperty("display", "none") (this.$refs["pop"] as Element).style.setProperty("display", "none")
}, },
stopClickPop: function (e : MouseEvent) { stopClickPop: function (e : MouseEvent) {
e.stopPropagation() //点击到pop的非灰色区域,拦截点击事件 e.stopPropagation() //点击到pop的非灰色区域,拦截点击事件
......
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
// 触发整个日历的点击事件,需要计算点击位置 // 触发整个日历的点击事件,需要计算点击位置
select(event : TouchEvent) { select(event : TouchEvent) {
const refs = this.$refs['draw-weeks'] as INode const refs = this.$refs['draw-weeks'] as Element
const rect = refs.getBoundingClientRect(); const rect = refs.getBoundingClientRect();
const dom_x = rect.left; // 元素左上角相对于视口的 X 坐标 const dom_x = rect.left; // 元素左上角相对于视口的 X 坐标
const dom_y = rect.top; // 元素左上角相对于视口的 Y 坐标 const dom_y = rect.top; // 元素左上角相对于视口的 Y 坐标
...@@ -139,7 +139,7 @@ ...@@ -139,7 +139,7 @@
// 绘制日历顶部信息 // 绘制日历顶部信息
drawHeader() { drawHeader() {
const refs = this.$refs['draw-header'] as INode const refs = this.$refs['draw-header'] as Element
let ctx = refs.getDrawableContext() let ctx = refs.getDrawableContext()
if (ctx == null) return if (ctx == null) return
const date_header_map = ['一', '二', '三', '四', '五', '六', '日'] const date_header_map = ['一', '二', '三', '四', '五', '六', '日']
...@@ -167,7 +167,7 @@ ...@@ -167,7 +167,7 @@
// 绘制日历主体 // 绘制日历主体
drawWeek(weeks : Array<Array<DateType>>, time : string) { drawWeek(weeks : Array<Array<DateType>>, time : string) {
const start_time = Date.now() const start_time = Date.now()
const refs = this.$refs['draw-weeks'] as INode const refs = this.$refs['draw-weeks'] as Element
let ctx = refs.getDrawableContext() let ctx = refs.getDrawableContext()
if (ctx == null) return if (ctx == null) return
const dom = refs.getBoundingClientRect() const dom = refs.getBoundingClientRect()
......
...@@ -26,8 +26,8 @@ ...@@ -26,8 +26,8 @@
lastY: 0, //上次 lastY: 0, //上次
lastY2: 0, // lastY2: 0, //
bAnimation: false, //是否动画 bAnimation: false, //是否动画
halfNode: null as INode | null, halfNode: null as Element | null,
scrollNode: null as INode | null scrollNode: null as Element | null
} }
}, },
methods: { methods: {
...@@ -131,9 +131,9 @@ ...@@ -131,9 +131,9 @@
} }
}, },
onReady() { onReady() {
this.halfNode = this.$refs['halfScreen'] as INode; this.halfNode = this.$refs['halfScreen'] as Element;
this.halfHeight = this.halfNode!.getBoundingClientRect().height; this.halfHeight = this.halfNode!.getBoundingClientRect().height;
this.scrollNode = this.$refs['halfScroll'] as INode; this.scrollNode = this.$refs['halfScroll'] as Element;
this.totalHeight = uni.getWindowInfo().windowHeight; this.totalHeight = uni.getWindowInfo().windowHeight;
this.halfNode?.style?.setProperty('top', this.totalHeight.toString()); this.halfNode?.style?.setProperty('top', this.totalHeight.toString());
......
...@@ -76,21 +76,21 @@ ...@@ -76,21 +76,21 @@
} as SwiperViewItem } as SwiperViewItem
] as SwiperViewItem[], ] as SwiperViewItem[],
swiperIndex: -1, swiperIndex: -1,
$pageScrollView: null as null | INode, $pageScrollView: null as null | Element,
$headerHeight: 0, $headerHeight: 0,
$animationFinishIndex: 0, $animationFinishIndex: 0,
$tabScrollView: null as null | INode, $tabScrollView: null as null | Element,
$indicatorNode: null as null | INode, $indicatorNode: null as null | Element,
$swiperWidth: 0, $swiperWidth: 0,
$swiperTabsRect: [] as SwiperTabsItem[] $swiperTabsRect: [] as SwiperTabsItem[]
} }
}, },
onReady() { onReady() {
this.$pageScrollView = this.$refs['pageScrollView'] as INode; this.$pageScrollView = this.$refs['pageScrollView'] as Element;
this.$headerHeight = (this.$refs['header'] as INode).offsetHeight this.$headerHeight = (this.$refs['header'] as Element).offsetHeight
this.$swiperWidth = (this.$refs['swiper'] as INode).getBoundingClientRect().width this.$swiperWidth = (this.$refs['swiper'] as Element).getBoundingClientRect().width
this.$tabScrollView = this.$refs['tabScroll'] as INode this.$tabScrollView = this.$refs['tabScroll'] as Element
this.$indicatorNode = this.$refs['indicator'] as INode this.$indicatorNode = this.$refs['indicator'] as Element
this.cacheTabItemsSize() this.cacheTabItemsSize()
this.setSwiperIndex(0, true) this.setSwiperIndex(0, true)
}, },
...@@ -170,7 +170,7 @@ ...@@ -170,7 +170,7 @@
}, },
cacheTabItemsSize() { cacheTabItemsSize() {
this.$swiperTabsRect.length = 0 this.$swiperTabsRect.length = 0
const tabs = this.$refs["swipertab"] as INode[] const tabs = this.$refs["swipertab"] as Element[]
tabs.forEach((node) => { tabs.forEach((node) => {
this.$swiperTabsRect.push({ this.$swiperTabsRect.push({
x: node.offsetLeft, x: node.offsetLeft,
...@@ -260,4 +260,4 @@ ...@@ -260,4 +260,4 @@
.swiper-item { .swiper-item {
flex: 1; flex: 1;
} }
</style> </style>
\ No newline at end of file
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
stickyTop: 0, stickyTop: 0,
stickyTran: 0, stickyTran: 0,
scrollTop: 0, scrollTop: 0,
stickyNode: null as INode | null stickyNode: null as Element | null
} }
}, },
methods: { methods: {
...@@ -70,11 +70,11 @@ ...@@ -70,11 +70,11 @@
onLoad() { onLoad() {
}, },
onReady() { onReady() {
this.stickyNode = this.$refs['sticky'] as INode; this.stickyNode = this.$refs['sticky'] as Element;
// let rect = this.stickyNode?.getBoundingClientRect(); // let rect = this.stickyNode?.getBoundingClientRect();
// this.stickyTop = rect?.top; // this.stickyTop = rect?.top;
//this.stickyTop = this.stickyNode?.getBoundingClientRect()?.top; //this.stickyTop = this.stickyNode?.getBoundingClientRect()?.top;
let rect = (this.$refs['sticky'] as INode).getBoundingClientRect(); let rect = (this.$refs['sticky'] as Element).getBoundingClientRect();
this.stickyTop = rect.top; this.stickyTop = rect.top;
} }
} }
......
...@@ -45,8 +45,8 @@ ...@@ -45,8 +45,8 @@
return { return {
swiperList: [] as SwiperViewItem[], swiperList: [] as SwiperViewItem[],
swiperIndex: -1, swiperIndex: -1,
$tabScrollView: null as null | INode, $tabScrollView: null as null | Element,
$indicatorNode: null as null | INode, $indicatorNode: null as null | Element,
$animationFinishIndex: 0, $animationFinishIndex: 0,
$swiperWidth: 0, $swiperWidth: 0,
$swiperTabsRect: [] as SwiperTabsItem[] $swiperTabsRect: [] as SwiperTabsItem[]
...@@ -61,9 +61,9 @@ ...@@ -61,9 +61,9 @@
} }
}, },
onReady() { onReady() {
this.$tabScrollView = this.$refs['tabScroll'] as INode this.$tabScrollView = this.$refs['tabScroll'] as Element
this.$indicatorNode = this.$refs['indicator'] as INode this.$indicatorNode = this.$refs['indicator'] as Element
this.$swiperWidth = (this.$refs["swiper"] as INode).getBoundingClientRect().width this.$swiperWidth = (this.$refs["swiper"] as Element).getBoundingClientRect().width
this.cacheTabItemsSize() this.cacheTabItemsSize()
this.setSwiperIndex(0, true) this.setSwiperIndex(0, true)
}, },
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
}, },
cacheTabItemsSize() { cacheTabItemsSize() {
this.$swiperTabsRect.length = 0; this.$swiperTabsRect.length = 0;
const tabs = this.$refs["swipertab"] as INode[] const tabs = this.$refs["swipertab"] as Element[]
tabs.forEach((node) => { tabs.forEach((node) => {
this.$swiperTabsRect.push({ this.$swiperTabsRect.push({
x: node.offsetLeft, x: node.offsetLeft,
......
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
return { return {
swiperList: [] as SwiperViewItem[], swiperList: [] as SwiperViewItem[],
swiperIndex: -1, swiperIndex: -1,
$tabScrollView: null as null | INode, $tabScrollView: null as null | Element,
$animationFinishIndex: 0, $animationFinishIndex: 0,
$swiperWidth: 0 $swiperWidth: 0
} }
...@@ -52,8 +52,8 @@ ...@@ -52,8 +52,8 @@
} }
}, },
onReady() { onReady() {
this.$tabScrollView = this.$refs['tabScroll'] as INode this.$tabScrollView = this.$refs['tabScroll'] as Element
this.$swiperWidth = (this.$refs["swiper"] as INode).getBoundingClientRect().width this.$swiperWidth = (this.$refs["swiper"] as Element).getBoundingClientRect().width
this.setSwiperIndex(0, true) this.setSwiperIndex(0, true)
}, },
methods: { methods: {
...@@ -106,7 +106,7 @@ ...@@ -106,7 +106,7 @@
const min_ratio = 1 const min_ratio = 1
const max_ratio = 1.3 const max_ratio = 1.3
const tabs = this.$refs['swipertab'] as INode[] const tabs = this.$refs['swipertab'] as Element[]
const current_node = tabs[current_index]! const current_node = tabs[current_index]!
const move_to_node = tabs[move_to_index]! const move_to_node = tabs[move_to_index]!
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册