diff --git "a/\344\272\214\350\275\256\350\275\246\345\272\224\347\224\250\345\274\200\345\217\221/\347\263\273\347\273\237\350\203\275\345\212\233/js\345\272\224\347\224\250\346\227\213\350\275\254\350\265\260\347\204\246.md" "b/\344\272\214\350\275\256\350\275\246\345\272\224\347\224\250\345\274\200\345\217\221/\347\263\273\347\273\237\350\203\275\345\212\233/js\345\272\224\347\224\250\346\227\213\350\275\254\350\265\260\347\204\246.md" new file mode 100644 index 0000000000000000000000000000000000000000..6cff54a62b537fc2fae7b48f0231b144ec290053 --- /dev/null +++ "b/\344\272\214\350\275\256\350\275\246\345\272\224\347\224\250\345\274\200\345\217\221/\347\263\273\347\273\237\350\203\275\345\212\233/js\345\272\224\347\224\250\346\227\213\350\275\254\350\265\260\347\204\246.md" @@ -0,0 +1,363 @@ +### 焦点 + +给组件绑定ref属性，通过ref获取组件，设置focus属性为true使组件获焦。 + +#### API + +| API | 说明 | +| -------- | -------- | +| rotation | 旋转事件 | + +```html +
+ + + + + item--{{$idx}} + + + +
+``` + +```js +const list = this.$refs.list; +list.rotation({"focus": true}); +``` + +#### 属性 + +| 名称 | 参数 | 描述 | +| ------------ | ------- | ---------------- | +| setfocusable | boolean | 组件是否支持获焦 | + +#### 事件 + +| 名称 | 参数 | 描述 | +| ----- | ---- | -------------------- | +| focus | - | 获取焦点触发该事件。 | +| blur | - | 失去焦点触发该事件。 | + +### 旋转事件 + +组件获焦时，旋转才会触发旋转事件，返回旋转角度。 + +| 名称 | 参数 | 描述 | +| ------ | ----- | ------------------------------------------------ | +| rotate | event | 旋转动作触发该事件。（组件要先获焦旋转才会生效） | + +event属性 + +| 属性 | 类型 | 说明 | +| ----------- | ------ | -------- | +| rotateangle | number | 旋转角度 | + +```html + +
+
+``` + +```js +// index.js +export default { + data: { + title: '' + }, + onShow() { + const div = this.$refs.div; + div.rotation({"focus": true}); + }, + rotateTest(e) { + console.log('rotateangle：' + e.rotateangle) + } +}; +``` + +```html + +
+
+
+
+``` + +```js +// index.js +export default { + data: { + title: '', + borderWidth: 0, + borderWidth2: 0 + }, + changeFocus() { + this.borderWidth = 5 + }, + blurTar() { + this.borderWidth = 0 + }, + changeFocus2() { + this.borderWidth2 = 5 + }, + blurTar2() { + this.borderWidth2 = 0 + }, + rotateTest(e) { + let div; + if (e.rotateangle > 0) { + div = this.$refs.div; + } else { + div = this.$refs.div2; + } + div.rotation({"focus": true}); + } +}; +``` + +### 按键事件 + +点击按键时触发，返回按键类型的ID，0：单击，1：双击，3：长按。 + +| 名称 | 参数 | 描述 | +| ---- | ----- | ---------------- | +| keys | event | 按键触发该事件。 | + +event属性 + +| 属性 | 类型 | 说明 | +| ----- | ------ | ------ | +| keyid | number | 按键ID | + +```html + +
+
+``` + +```js +// index.js +export default { + data: { + title: '' + }, + onShow() { + const div = this.$refs.div; + div.rotation({"focus": true}); + }, + keysFun(e) { + console.log('keyid：' + e.keyid) + } +}; +``` + +### 窗口焦点抢占 + +窗口获焦，窗口内的组件才能获焦，需给应用的最外层的容器设置setwindow为true，通过setfocuspriority设置优先级，数字大的窗口优先级高。 + +| API | 参数 | 描述 | +| ----------- | ------- | -------- | +| windowFocus | options | 窗口获焦 | + +options参数 + +| 名称 | **类型** | 可选 | **说明** | +| ------ | -------- | ---- | ------------------------------------------------------------ | +| focus | boolean | 否 | 设置窗口是否获焦（应用打开时设置focus为true，应用退出时设置focus为false） | +| viewId | string | 是 | 获焦的组件目标id（不设置默认为窗口容器获焦） | + +#### 属性 + +| 名称 | 参数 | 描述 | +| ---------------- | ------- | ------------------------- | +| setwindow | boolean | 是否设置容器组件为窗口 | +| setfocuspriority | number | 窗口优先级（不设置默认0） | + +#### 事件 + +| 名称 | 参数 | 描述 | +| -------------- | ----- | ------------------------ | +| focuspreempted | event | 窗口焦点抢占触发该事件。 | +| focusidle | - | 窗口焦点恢复触发该事件。 | + +event属性 + +| 属性 | 类型 | 说明 | +| ---------------------- | ------ | ------------------------ | +| preemptedfocusedviewId | string | 被抢占焦点组件的ID属性值 | + +```html + +
+ 走焦{{title}} +
+
+
+
+
+
+
+
+
+ +``` + +```js +//index.js +export default { + data: { + title: '', + borderWidth: 0, + borderWidth2: 0, + borderWidth3: 0, + preemptedfocusedviewId: '' + }, + onShow() { + const divWin = this.$refs.divWin; + divWin.windowFocus({"focus": true, "viewId": "jsDiv"}); + }, + clickTest(e) { + const rightdiv = this.$refs.rightdiv; + rightdiv.windowFocus({"focus": true, "viewId": "rightdiv"}); + }, + clickTest2(e) { + const rightdiv = this.$refs.rightdiv; + rightdiv.windowFocus({"focus": false}); + }, + changeFocus() { + this.borderWidth = 5 + }, + blurTar() { + this.borderWidth = 0 + }, + changeFocus2() { + this.borderWidth2 = 5 + }, + rightFocus() { + this.borderWidth3 = 5 + }, + rightBlur() { + this.borderWidth3 = 0 + }, + blurTar2() { + this.borderWidth2 = 0 + }, + keysFun(e) { + this.title = e.keyid + '' + }, + rotateTest(e) { + let div; + if (e.rotateangle > 0) { + div = this.$refs.div; + } else { + div = this.$refs.div2; + } + this.title = e.rotateangle + ''; + div.rotation({"focus": true}); + + }, + focusidle() { + this.title = 'focusidle'; + if (this.preemptedfocusedviewId == "jsDiv") { + const div = this.$refs.div; + div.rotation({"focus": true}); + } + }, + focupreempted(e) { + this.preemptedfocusedviewId = e.preemptedfocusedview; + this.title = e.preemptedfocusedview; + } +}; + +``` + +```css +//index.css +.container { + width: 100%; + height: 100%; + justify-content: center; + align-items: center; + flex-direction: column; +} +.title { + width: 200px; + height: 60px; + font-size: 30px; + text-align: center; + margin: 10px; + background-color: aqua; +} +.text { + width: 200px; + font-size: 30px; + text-align: center; +} + +.leftBox { + width: 200px; + height: 200px; + background-color: chartreuse; + justify-content: center; + align-items: center; + flex-direction: column; + +} + +.rightBox { + width: 200px; + height: 200px; + background-color: #ff12dbac; +} + +``` +